CSS：禁用图片大小/“裁剪”图片？

Question

我有一个大约4000px宽的内嵌图像的页面（好的或坏的练习，没关系）。是否有一种CSS方式来裁剪图像，使其适合视口？基本上像background-size: cover，但对于内嵌图像。

由于它是一个负责任的网站，我已经加入这个CSS规则为所有的图片：现在

img { 
    max-width: 100%; 
    height: auto; 
} 

，对于“裁剪”的形象，我什么都试过与overflow，min-和max-width & -heigh，但我无法让它工作，浏览器总是将图像与视口相匹配。为min-height设置值甚至会导致压缩的图像。

Answer 1

，如果你想使用CSS可能藏汉设置图像使用CSS：

HTML：

<div class="img1"></div> 

的CSS：

.img1 { 
    background-image:url(yourimagepath); 
    height: 200px; /** A set size*/ 
    width: 300px; /** A set size*/ 
} 

如果你使用的图像标签，比您可以使用溢出属性：

HTML：

<div class="img1"> 
    <img ....> 
</div> 

CSS：

.img1 { 
    height: 200px; /** A set size*/ 
    width: 300px; /** A set size*/ 
    overflow:hidden; 
} 

Answer 2

您可以在一个容器中，以实现裁剪效果包裹<img>。

参见例如：http://jsfiddle.net/amyamy86/GZzru/

HTML：

<div class="image"> 
    <img src="http://www.bubblews.com/assets/images/news/616498554_1357418372.jpg" /> 
</div> 

CSS：

.image { 
    overflow: hidden; 
    height: 500px; /* crop size */ 
    width: 500px; 
}