获取 div 以缩小其中的图像

Question

我有一个 div，里面只有一张图片。图片通常占据 div 中的整个 space，并且 div 和图片具有相同的高度。除了 window 缩小时，图像会调整其大小以响应，但 div 保持相同的高度。 如何让 div 始终与其中的图像大小相同？

Answer 1

图像周围的 div 应具有属性 display: inline-block 且宽度未设置为 100%。

你为什么使用：

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

在那张图片上？

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

Answer 2

你试过用js实现吗？拍照高度：

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

比给你的图片容器 div 图片的高度:

$('#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 以缩小其中的图像

Get div to shrink with image inside of it

html

css

responsive