CSS：禁用图像大小调整/x27；裁剪'；图像？

我有一个内联图像页面，大约4000px宽（好的或坏的做法，没关系）。是否有CSS方法“裁剪”图像，使其适合视口？基本上类似于

背景尺寸：封面

，但用于内联图像

由于它是一个响应迅速的站点，我为所有图像添加了以下CSS规则：

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

---

现在，对于“裁剪”图像，我尝试了使用

溢出

、

最小

和

最大宽度

&

-高

的所有方法，但我无法让它工作，浏览器总是使图像适合视口。为

最小高度设置值

甚至会导致图像被压扁。

如果要使用css，也可以使用css设置图像：

Html:

如果必须使用图像标记，则可以使用溢出属性：

HTML:

---

如果要使用css，还可以使用css设置图像：

Html:

如果必须使用图像标记，则可以使用溢出属性：

HTML:

您可以将

包装在容器中以实现裁剪效果

见示例：

HTML:

您可以将

包装在容器中以实现裁剪效果

见示例：

HTML:

---

溢出：隐藏div

）的code>不起作用？

溢出：隐藏div

）的code>不起作用？

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

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

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

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

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

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