html - 按比例缩放图像以适合父级

Question

我想按比例缩放图片以适合父母

我得到的是：

我想要的是：

CSS：

.path {
    max-width: 100%;
    max-height: 100%;
    border: 3px solid #d7d7d7;
    cursor: pointer;
}

HTML：

<div>                
    <ul>                  
        <li class="li_parent"><div class="div_parent"><img class="path" src="path/path1.jpg"></div></li>
        <li class="li_parent"><div class="div_parent"><img class="path" src="path/path2.jpg"></div></li>
        <li class="li_parent"><div class="div_parent"><img class="path" src="path/path3.jpg"></div></li>                
    </ul> 
</div>

使用Javascript：

$(".div_parent").css( { "width" : Math.ceil($(document).width()*0.3)+"px"  } );

$(".div_parent").css( { "height" : Math.ceil($(".div_parent").width()/2.24)+"px"  } );

我希望路径类（图像）按比例适合div_parent ......

Answer 1

您正在调整.div_parent元素的大小，但您从未指定希望img元素填充其.div_parent。而不是使用max-height和max-width，请使用：

.path {
    height: 100%;
    width: 100%;
}

此外，您可以设置.div_parent（或li）元素（background-image: url(path.jpg)）的背景图像，而不是使用img元素来显示图像。这样，您可以使用background-size CSS3属性控制图像大小。

编辑：使用这样的CSS背景：

<ul class="gallery">
    <li style="background-image: url(path1.jpg)"></li>
    <li style="background-image: url(path2.jpg)"></li>
    <li style="background-image: url(path3.jpg)"></li>
</ul>

使用：

.gallery li {
    background-size: cover;
}

使用CSS或JavaScript设置li尺寸。

Edit2：如果您需要IE7 / 8支持，请使用以下HTML：

<ul class="gallery">
    <li style="
        background-image: url(path1.jpg);
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path1.jpg', sizingMethod='scale');
        -ms-filter:&quot;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path1.jpg', sizingMethod='scale')&quot;
        "></li>
</ul>