700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html中图片等比例展示 纯 CSS 不用背景 实现图片等比例展示

html中图片等比例展示 纯 CSS 不用背景 实现图片等比例展示

时间:2021-03-04 14:39:19

相关推荐

html中图片等比例展示 纯 CSS 不用背景 实现图片等比例展示

最简单的等比例:divimg{max-width:100%;max-height:100%;}

如上显示效果是:图片等比例缩放,不变形;图片所有区域都会显示。

但是,如上代码有可能会造成横向、纵向白边,当我们在做图片列表时,这会看起来有点乱,于是我们改进了下,保证横向没有白边,高度不足时上下留白,高度超出时隐藏图的上下:div{display:flex;align-items:center;justify-content:center;width:160px;height:90px;border:1pxsolid#eee;overflow:hidden;}

divimg{width:160px;}

首先:display:flex; align-items:center; justify-content:center; 保证水平、垂直居中显示。

其次:width:160px; height:90px; border:1px solid #eee; 限定显示框的大小。

然后:overflow:hidden; 实现图片高度超出的话,隐藏之。

最后:width:160px; 保障图片宽度一致。

这样:当高度不够时,图片垂直居中,上下留白;当高度超出时,图片上下被隐藏。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。