Question

html 中如果一张图超过了屏幕大小 如何自动将多出部分影藏 只显示中间部分

html 中如果一张图超过了屏幕大小 如何自动将多出部分影藏 只显示中间部分

Answer 1

<div><img src="1.jpg"></div>
如上面的列子：
比如div的宽高度分别为300px 200px；而图片的宽高度为400px 300px；这样图片比div要大
css:
div{ width:300px; height:200px; overflow:hidden}
div>img{ width:400px; height:300px; margin:auto;}
不过这里最好是用背景图片代替好一些；因为背景图片有一个样式background-position和background-size属性可以给图片绝对的居中和大小控制；
也就是说可以给图片100%的宽度和高度，即使图片没有屏幕那么大，我们给它100%属性也能填充到屏幕那么大，

追问

我是想要在小分辨率下显示图片中间部分，在大分辨率下显示全部图片

追答

用css3的@media属性，判断屏幕为多少的时候给它什么样式

追问

但这个banner 本身就是一个 固定的式样 用jq是已经完成了 但是感觉太麻烦 想看看有没有简单一点的方法

追答

可以的，用@media属性；会比你jq优先级高的