CSS如何使图片只放大而不会拉伸？

Question

我需要在一个页面中展示许多图片，为了整齐美观我规定了每个img标签的长宽，可是每张图片的长宽比例可能是不一致的，这就导致图片有严重的拉伸。可不可以在指定img标签的长宽后，使图片单纯放大到我所设置的比例而不会拉伸？因为拉伸会使图片严重变形<div class="content">     {volist name="list" id="vo" key="k"}     <a  style="display: inline;"  href="__STATIC__/{$activity[$k-1]}/{$vo.md5_name}.{$vo.type}" data-lightbox="example-set" data-title="点击图片左侧或右侧可查看下一张">     <img style="display: inline; border:2px solid white;" width="240" height="135" src="__STATIC__/{$activity[$k-1]}/{$vo.md5_name}.{$vo.type}" alt=""/></a>     {/volist} </div>

Answer 1

这个问题的核心是：图片的长宽比例和展示框的长款比例不同。

调展示框：

• 使用类似瀑布流或者照片墙的方式做展示，当然这是产品要考虑的事情

调图片：

• 两个时间节点：上传的时候和展示的时候。

• 两种方法：图片的length/width > 展示框的length/width，这时候以length进行缩放，问题是图片可能不会铺满展示框(1)，以width进行缩放，图片会被裁掉一部分(2)。

综上，这是一个取舍问题，不是技术问题。问一问你们的产品更容易解决这个问题。

开个脑洞，使用方法(1)然后用AI技术做辅助，自动补全不够的部分。
祝好。

Answer 2

object-fit: cover

不过兼容性比 background-size 略差，不兼容 IE，兼容 Edge。