如上效果,相框尺寸都一样,两张图片,一个竖的,一个横的,它都完整显示了,且没有超出相框,没有变形。如果我们强行指定 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;,意思就是垂直居中、水平居中。
相关阅读