Html 如何使中间裁剪的图像具有响应性？

根据一张照片，我成功地将一张照片居中裁剪。不过，我很难使中间裁剪的图像具有响应性

问题

当我缩小web浏览器窗口的大小时，中间裁剪的图像不能很好地缩小。相反，它保持固定的

高度

和

宽度

，并溢出视图端口。这个问题也许可以用一个例子更清楚地说明

如何使中间裁剪的图像能够很好地缩小？理想情况下，中间裁剪的图像将很好地缩小，同时仍被裁剪并保持相似的纵横比

.centered容器{
最大宽度：960像素；
保证金：自动；
}
.中心裁剪img{
宽度：640px；
高度：360px；
溢出：隐藏；
利润率：10px自动；
边框：1px红色实心；
位置：相对位置；
}
.中心裁剪img img{
位置：绝对位置；
左-100%；
右图：-100%；
前-100%；
底部：-100%；
保证金：自动；
最小高度：100%；
最小宽度：100%；
}

---

只需用%而不是px表示宽度

.center-cropped-img {
    width: 640px;// add in %
    height: auto;
    overflow: hidden;
    margin: 10px auto;
    border: 1px red solid;
    position: relative;
}

使用填充黑客。 你需要一个容器，你可以将它设置为宽度（以百分比表示）、高度（以0表示）和底部的填充来创建你想要的纵横比。 如果你能将你的图像设置为背景，那就更容易了

我为此写了一篇sass混音，在我的博客上也写了一篇小教程，其中有更广泛的解释：

如果您需要将图像放在图像标签中，请告诉我，这也是可能的，但将此（）添加到.center-crapped img中的速度不如您想要的快

？或者您不想更改正在修剪的区域

    max-width: 640px;
    width: 100%;

这是正确的裁剪吗

使用以下CSS，我们可以在调整窗口大小时保持容器的纵横比

width: 640px;
max-width: 100%;
height: 0;
padding-bottom: 50%; // 320px or lower (half of the width)

---

阅读代码中的注释以获得解释

HTML

<div class="container">
  <img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
</div>
<div class="container">
  <img src="http://i.imgur.com/BQUgmlB.png" alt="" /> 
</div>

---

以下解决方案使用CSS属性。图像放置在背景中。

按图纸空间缩放

我试过使用脚本。我只是创建了一个函数并调用了加载和重新调整大小

jQuery

$(document).ready(function () {
    heightMan();

    $(window).resize(function () {
        heightMan();
    });
});

function heightMan() {
    var winHeight = $(window).height();
    var winHeight_50 = (winHeight / 2) - 20;

    var container_node = $('.center-cropped-img');
    var container_height = container_node.height();
    container_height = winHeight_50;

    container_node.css('height', container_height);
}

CSS更改

.center-cropped-img {
    width: 64%;
    overflow: hidden;
    margin: 10px auto;
    border: 1px red solid;
    position: relative;
}

---

.

。。。设置

宽度

实际上效果很好，但正如我提到的，设置

高度

就不行了。请尝试高度：自动和宽度百分比。这种技术的缺点似乎是，您只能在左/右或上/下均匀地裁剪图像。有没有关于如何做到两者都更精确的裁剪的建议？我以为OP想要缩放，然后裁剪。他已经有了一视同仁的准则。

.center-cropped-img {
    width: 64%;
    overflow: hidden;
    margin: 10px auto;
    border: 1px red solid;
    position: relative;
}