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

object-fit: cover

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

Answer 2

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

调展示框：

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

调图片：

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

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

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

Answer 3

如果你要固定长宽，就如上面所说的用CSS属性background-image，并且设置background-size和background-position。

你也可以只固定高度，这样宽度是自动调整保持比例的。

如果你出于语意的考虑（SEO等等原因），非要用img的话，你可以在外面加个容器，固定容器的宽高，然后将img定位在容器中央，再设置容器的overflow: hidden，不过img的宽高不好控制，可以考虑在加载时监听事件设置宽或高。

Answer 4

使用background-image放图片

Answer 5

使用background背景,background-size:cover,background-position:center center