CSS：禁用图像大小调整/“裁剪”图像？

Question

我的页面内嵌图像宽度约为4000像素（好的或坏的做法，没关系）。是否有CSS方法来“裁剪”图像以使其适合视口？基本上与background-size: cover类似，但对于内嵌图像。

由于它是一个响应式网站，我已为所有图片添加了此CSS规则：

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

现在，对于“裁剪”图片，我尝试使用overflow，min-和max-width＆amp; -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*/
}

如果必须使用image标签，则可以使用overflow属性：

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