[英]html - Scale image proportionally to fit parent
我想按比例缩放图像以适合父级
我得到的是:
我想要的是:
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 ...
您正在调整.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:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path1.jpg', sizingMethod='scale')"
"></li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.