失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 不让图片失真 使大小不一的图片整齐排列!

不让图片失真 使大小不一的图片整齐排列!

时间:2023-08-25 21:41:09

相关推荐

不让图片失真 使大小不一的图片整齐排列!

作为前端er,肯定碰到过将一组要将一组图标整齐排列的问题,图片一样大还好,不一样大的话,没经验还真是烦人呢。

如图,排列不整齐美观。为了方便你我他,我加了边框

如果粗暴的把图片设置为一样大小,那图片会失去原有比例,导致伸缩,不雅。一个一个调整也不靠谱。

如何是好。其实很简单,在给4个图片外面分别加个一样大小的div,然后让图片居中就好啦。

div {border: 1px solid blue;width: 130px;height: 130px;position: relative;}

div>img {border: 1px solid red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

居中后:

还算整齐。忽视忽略我随便截的图。当然,一般我们都会把图片高度截成一样高的,这样再设置居中就会看起来很整齐,很舒服。

如果觉得《不让图片失真 使大小不一的图片整齐排列!》对你有帮助,请点赞、收藏,并留下你的观点哦!

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