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

Question

我有一个问题:我在 div 中有一张图片。图像比 div 大，并且它具有 height:100% 以使其看起来不错。因此，当我调整大小时，图像会变大并且看起来不错。但是当我调整浏览器的大小时使它变小图像变小，但它的父级保存了原始图像的宽度。事实上，它只需要图像的宽度。我为您准备了一个 fiddle ，只需尝试调整浏览器或输出部分的大小即可看到红色背景出现。我很好奇是否有机会使 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

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