300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 如何处理图片变形

如何处理图片变形

时间:2023-05-07 13:45:20

相关推荐

如何处理图片变形

<div class="father"><img src="xxxxx.jpg"/></div><style>.father{width: 300px;height: 300px;overflow: hidden;/* position: relative;*/}.father img{display: block;width: 300px;/* 如果需要图片居中的话position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);*/}</style>

这样图片就多余的就能被父容器裁剪掉(overflow:hidden),另外还可以做居中处理,这样能够达到在图片未知宽高的时候尽最大可能的适配,同时不拉伸变形图片

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