Question

我有一个div，里面只有一张图片。图像通常占据div中的整个空间，div和图像都具有相同的高度。除非窗口缩小，否则图像会调整其大小以使其响应，但div保持相同的高度。 如何让div始终与其中的图像具有相同的大小？

Answer 1

div图像应该具有属性display: inline-block，宽度设置为100％。

你为什么要用：

background-repeat: no-repeat;
background-position: center;
background-size: cover;

在那张照片上？

height: 100%;上也不需要#ProductPhoto，因为无论如何它都会有内容的高度。

Answer 2

你试过用js做过吗？拍摄照片高度：

var pic_height = $('.photo').outerHeight();

比你的pic容器div高出pic：

$('#ProductPhoto').height(pic_height);

希望这有帮助

Answer 3

您可以使用位置相对来实现您想要的目标：

<强> CSS

#ProductPhoto {
    display: inline-block;
    overflow: hidden;
    max-width: 364px;

}
.photo {
    position: relative;
    display:block;
    top: 0;
    left: 0;
    width: 100%;  
}

<强> HTML

<div data-scale="1.7" class="product-single__photos tile col-md-8" id="ProductPhoto">       
            <img class="photo" src="//cdn.shopify.com/s/files/1/1698/6183/products/DSC_0345_123483_large.jpg?v=1486835408" alt="Another Skirt" id="ProductPhotoImg">
</div>

<强> DEMO HERE

Answer 4

高度100％无效，因为div高度始终取决于其内容，请尝试使用

height: auto

而不是身高：100％

让div缩小到里面的图像

4 个答案: