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

您所在的位置:网站首页 ps怎么快速排列尺寸不一样的图片 不让图片失真,使大小不一的图片整齐排列!

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

2024-07-17 04:57| 来源: 网络整理| 查看: 265

作为前端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%); }

 

居中后:

 

 

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3