Question

我有一个div，根据浏览器宽度改变宽度，响应。在div中是一个图像，在我的网站最广泛的版本中最接近原始图像的宽度/高度。

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

全尺寸
移动版

Answer 1

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

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

Answer 2

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

Answer 3

如果硬编码图像的宽度不是问题，那么这应该有效。

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

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

Answer 4

我一直试图找到解决方案很长一段时间后终于遇到了这个问题：

<强> HTML：

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

<强> CSS：

.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对你很重要，你可能运气不好，但我希望这有帮助！

Here is a fiddle

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

4 个答案: