css - CSS：禁用图像大小/“裁剪”图像？

Question

我有一个包含大约 4000 像素宽的内联图像的页面（好的或坏的做法，没关系）。是否有 CSS 方法来“裁剪”图像以使其适合视口？基本上喜欢background-size: cover，但对于内联图像。

因为它是一个响应式网站，所以我为所有图像添加了这个 CSS 规则：

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

现在，对于“裁剪”的图像，我用overflow,min-和max-width&尝试了一切-heigh，但我无法让它工作，浏览器总是使图像适合视口。设置min-heighteven 的值会导致图像被压扁。

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