后台图片在前端显示时失真

Question

做一个图片展示的功能，在前端是固定图片显示区块（比如300*300），但是在后台传图是不限制尺寸的，怎么才能做到既充满图片展示区又不让图片失真？

Answer 1

1、前端 是等比例缩放，只限制 宽 or 高，而不是同时限制

2、后台上传图片的时候

1、直接做剪裁功能

2、后端处理做图像长宽比例的验证， 不符合要求的不能上传

Answer 2

可以试试css属性：

background-szie: cover;

配合：

background-position: center;

可实现居中。

Answer 3

一种是直接设置到背景图上尺寸cover，还有一种是套个容器然后overflow:hidden。