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; 
}