关于图片的大小问题

Question

老师你好，请问下,老师的代码里面的图片的大小都是一样的，现实工作中假如出现了图片大小的情况，这一节的代码势必出现问题。那么可能需要写死容器的高度，然后图片的高度也设置为100%，可是这样的话图片仍然有拉伸。
这种情况应该谁来处理(前端还是后端)，怎么处理呢？

Answer 1

西门老舅 2021-11-10 22:24:06

你好，这就要分情况了。

保证图片尺寸大小相同，后端服务器处理一下即可。

如何图片是管理系统上传的图片，一般会要求上传的图片按照指定的尺寸上传，有的上传带有裁切功能，保证图片比例和大小。

如何后端没有处理图片，就直接给到了前端，前端要想保证图片等比，是通过object-fit: cover来实现的。

• johnny_2008 #1

  老师 object-fit: cover 这个裁切是什么规则呀，看裁切不是从最左为起点向右裁切，看起来像是从图片的中心向两边裁切，怎么设置裁切的范围坐标呢

• 西门老舅 回复 johnny_2008 #2

  object-position 了解一下

• johnny_2008 回复 西门老舅 #3

  收到，期待后续老师的课程

点开查看后面1条评论