Question

我有一个问题：我在div中有一个图像。图像比div大，它有height:100%使它看起来不错。所以，当我做一个调整大小的图像变得更大，它看起来很好。但是当我调整浏览器大小以使其变小时，图像会变小，但其父级会保存原始图像的宽度。实际上它只占用图像的宽度。我找到了一个小提琴，只是尝试调整浏览器或输出部分的大小以查看红色背景。我很好奇是否有机会使div尺寸与图像动态相同。我需要容器尺寸因为除了图像我还有一些其他元素，他们使用div的坐标。感谢。

重要！它的工作方式与我在FireFox中看到的方式相同。 Chrome的行为不同。

.img-wrapper {
  display: inline-block;
  height: 100%;
  position: relative;

    background-color: red;
}

.gallery-image {
  bottom: 90px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 25px;
    background-color: grey;
}

img {
    height: 100%;
}

<div class="gallery-image">
    <div class="img-wrapper">
        <img src="http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg" alt=""/>
</div>
</div>

Answer 1

您可以设置图像的最小尺寸，使其不会像这样小

 img {
     min-height: 200px;
     min-width: 400px;
 }

Answer 2

这通常使用CSS使用background-image：url（“http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg”）来完成。这样你的图像和div就成了一个对象。然后，您只需相应地控制div和背景图像大小。旁注......它也有助于提高性能。

如何防止在调整大小时更改父级的宽度

2 个答案: