css实现未知图片宽度图片在div中水平居中

在开发文章页面的时候,会遇到对图文的处理,文字很简单啊,用text-again: justify;可以实现文本两端对齐,然后再设置首行缩进就OK了。

但是对于图片,我们不知道用户上传多大的图片,更不知道图片的宽度,要对图片进行居中处理感觉有点难度,下面分析一下我的思路:

处理办法想到两种

第一种:图片固定宽度

例如:图片设置成宽80%,居中的话就用margin,因为剩余宽度就剩20%了,这样所有的图片都是一样宽度,还比较美观。但是有缺点,比这个尺寸小的会模糊,比这个宽度大的会被压缩,很明显这不是我想要的效果。不过像“今日头条”手机端是这样的,细心的可以去看看!

img:{
width:80%;
margin-left:10%;
margin-right:10%;
}

第二种:就是利用弹性布局,让图片居中

例如:图片宽度自动,最大宽度80%,大于这个尺寸才会生效变成80%,左右自动;使用弹性布局display:flex,如果还需要垂直居中的话,那就再加上align-items: center;

.img:{
max-width: 80%;
margin-left: auto;
margin-right: auto;
display: flex;/*水平居中*/
justify-content: center;
}

这样我们的图片就会无论用户上传多大的图片,都会始终居中了!!!

赞(3) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » css实现未知图片宽度图片在div中水平居中
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏