§ ITPOW >> 文档 >> CSS

CSS 轻松实现图片在指定范围内等比例完全显示

作者:vkvi 来源:ITPOW(原创) 日期:2019-8-21

inline-block 轻松实现图片在指定范围内等比例完全显示

如上效果,相框尺寸都一样,两张图片,一个竖的,一个横的,它都完整显示了,且没有超出相框,没有变形。如果我们强行指定 width、height,是做不到不变形的。

可以用背景配合 background-size 来做,但是本文介绍另一种方法,更符合我们的 HTML 习惯。

<style type="text/css">
div { float:left; margin-left:10px; width:150px; height:200px; border:1px solid #eee; display:flex; align-items:center; justify-content:center; }
img { display:inline-block; max-width:90%; max-height:90%; }
</style>
<div><img src="cftea.jpg"></div>
<div><img src="itpow.jpg"></div>

核心就是:display:inline-block; max-width:90%; max-height:90%;,要说明的是,使用 inline-block 和使用 block 在这里意思是一样的,inline-block 与 block 只是有一点和 block 不同:就是 inline-block 不会占一行,所以外层元素用 text-align:center; 时,内层的 inline-block 也就在外层元素中居中。

有了 block 属性之后,配置 max-width、max-height,它就会自动判断。

而上层的 display:flex; align-items:center; justify-content:center;,意思就是垂直居中、水平居中。

相关阅读

相关文章