前端如何处理图片变形

Question

后台读取的图片大小各异,我怎么在前端显示不变形?我让图片的宽100%,但是高度怎么控制,按比例的话,图片大了,看不到啥

Answer 1

如果图片高度太高，你设置一个max-height。不是很高，符合要求就设置 height：auto

Answer 2

如果宽度100%高度还要限制的话、那图片非等比例调整、会变形、这种其实可以前端、后端、和UI来协调的、要么图片配合代码、要么后台传过去的时候尺寸也给你发过去

Answer 3

图片的宽100% 那不就是后台传来的图片是什么样的，就直接显示什么样了，最好给你们后台说一下，将图片的尺寸规范一下，沟通沟通嘛

Answer 4

这个最好是跟前端说好图片的比例 后台上传时按照前端给的比例上传。如果是用户自己上传的后台没办法控制，那就前端用JS 来控制图片的宽高

Answer 5

只设置图片的宽度就好，不用管高度

img
{
width:100%;
}

这样图片将按照 img 的各父元素决定的宽度进行显示，而高度将按比例自动适应，如果原图片的宽度小于了要显示的宽度，会出现拉伸，可用 max-width:100% 来解决，此时，较小的图片将显示其实际大小

Answer 6

楼主可以采用这个方法

<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),另外还可以做居中处理,这样能够达到在图片未知宽高的时候尽最大可能的适配,同时不拉伸变形图片

下面是我司的做法,我司的图片会上传至upyun这类的cdn,图片命名格式如下,upyun提供图片裁剪功能只要在原有图片后面加上 !320x320.jpg 类似的后缀的话,就能生成很规则的矩形图片了