美文网首页
如何实现图片完全展示且不变形?

如何实现图片完全展示且不变形?

作者: 毛毛_000e | 来源:发表于2021-03-05 11:54 被阅读0次

html代码:

<div><img src=".test.png" /></div>

思路:

如果直接写死图片的长宽,那么图片有可能变形。所以,可以通过设置外层div的长宽,再设置内层图片的,maxwidth,maxheight属性,就可以让图片根据自身的长宽比去进行缩放,如果高度不够,则居中展示

div{

width:100px;height:100px;display:table-cell;vertical-align:middle;

}

img{

max-width:100%;max-height:100%;

}

相关文章

网友评论

      本文标题:如何实现图片完全展示且不变形?

      本文链接:https://www.haomeiwen.com/subject/yterqltx.html