如何使中心裁剪图像响应？

Question

根据现有的答案,我设法将裁剪图像居中.但是,我无法使中心裁剪的图像响应.

题

当我减小Web浏览器窗口的大小时,中心裁剪的图像不能很好地缩小.相反,它维护它是固定的height,width并溢出视图端口.小提琴可能会更清楚地表明这个问题.

如何才能使中心裁剪图像缩小？理想情况下,中心裁剪后的图像会在裁剪时保持良好的缩小,并保持相似的纵横比.

.centered-container {
  max-width: 960px;
  margin: auto;
}
.center-cropped-img {
  width: 640px;
  height: 360px;
  overflow: hidden;
  margin: 10px auto;
  border: 1px red solid;
  position: relative;
}
.center-cropped-img img {
  position: absolute;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
}

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

同样,这里是一个小提琴,或许可以比散文更好地展示问题.

Answer 1

只需以 % 为单位给出宽度，而不是 px 。

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