获取后台不规则的图片，前端固定宽高不变形

Question

后台用户上传各种大小比例的图片，前台通过固定宽高 比如144px宽，108px高的图片展示。
怎么样才能保证图片不变形呢， 有啥插件或者黑科技吗

Answer 1

仅供参考
flex解决方案
jq解决方案

Answer 2

没有啥黑科技啊..就是给 image 属性加上 width:144px,height:108px

<img style="width:144px;height:108px;" src=".imgurl">

Answer 3

绝对会变形的，要是图片像素比144x108还小，不仅会变形，还会失真呢

Answer 4

不能。

网站的正常显示需要技术和业务配合的，要么就后台上传的时候进行裁剪。

Answer 5

js获取一下图片尺寸，width>height

css
img{
width:144px;
height:auto
}
反之
img{
width:auto;
height:108px
}

Answer 6

只能大图往小控制，用样式设置下最大宽高，如果上传的是小于目标的，就让图片在容器居中

Answer 7

样式修改img标签是没有方法控制的，
可以给图片一个固定宽高的容器，可以将图片以背景形式引入
<div class="box" style="background-image:url('imgurl');background-size:cover;"><div>

Answer 8

图片不变性的话就固定宽度，高度auto把，你直接固定宽高图片肯定失真。