Html div图像，中心全尺寸响应

我有一个div，它根据浏览器宽度改变宽度，响应速度快。在div中有一个图像，在我的站点的最广泛版本中，该图像在宽度/高度方面与原始图像最接近

当浏览器窗口变小时，我希望图像的高度保持不变，但宽度溢出被隐藏。图像应该在div中居中。这可能吗

全尺寸

手机版

---

示例

可以只使用媒体查询。例如：

@media screen and (max-width: 640px) {
  #yourImage{
      overflow-x: hidden;
  }
}

---

有一个很棒的jQuery插件叫backstretch。通常它用于制作完整的背景图像，如。但它也可以用于任何大小的小div。

---

如果硬编码图像的宽度不是问题，那么这应该可以工作

img#your-img {
    margin: 0 calc(50% - (/* the width of img#your-img */ / 2));
    overflow: hidden;
}

---

我希望这有帮助，祝你好运

我花了很长时间试图找到一个解决方案，最后遇到了这个问题：

HTML:

<div class="image-wrapper">
    <img src="http://placehold.it/350x200">
</div>

.image-wrapper {
    /* Height 0, padding-bottom, and overflow hidden
    give the wrapper height since it won't get a height
    from it's child being positioned absolutely */
    height:0;
    padding-bottom:65%;
    position:relative;
    overflow:hidden;
    width:100%; /* your dimension here (can be px or %) */
}
.image-wrapper img {
    display:block;
    height:100%;
    left:50%;
    position:absolute;
    top:50%;
    width:auto;

    /* Negative translate instead of negative margins */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

我已经测试过了，它是有效的。如果IE对你很重要，你可能会走运，但我希望这有帮助

---

您是否预先知道图像的宽度，或者您是否希望这适用于任何图像宽度？根据上传图像的难度，我可以坚持上传相同宽度的图像。如果可能，宽度应不同。