图片自适应容器有没有完美的方案（纯理论）

马黑黑

装载图片的box，也就是图片容器，如果设定了固定的高宽尺寸，其内的图片可以自适应高宽吗？

答案是：可以，但要付出牺牲。

最简单的方法是给 img 设置 100% 的 width 和 height，这样图片会铺满容器，缺点是图片可能会变形——当图片自身的高宽比例与容器的高宽比例不一致时。

最传统的方法是让图片以做容器的 background-image 出现，容器的 background-size 可以设置为 cover，如以下的简化写法：

background: url('图片地址') no-repeat center/cover;

同等于：

background-image: url('图片地址');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;

以上这样的设定，可以保证图片铺满容器，并保证图片不会变形，效果为图片的高度和宽度有一样按比例给出完整的内容，另一样则会被裁减掉一部分。若用 contain 取代 cover，则图片是完美的，但容器或是横向或是纵向会留白，除非图片的高宽比例等于容器的高宽比例。

最新潮的方法用 object-fit 属性，与背景图相比，object-fit属性设定直接作用于 img 标签，并能让爬虫搜索到图片。记住，和上面代码示例一样，图片的容器是固定高宽尺寸的，我们的代码省略了这个设置：

object-fit: cover; /* contain */

object-fit 和背景图片的用法差不多，也是 cover 和 contain 等值，意义与效果也没有区别。

还有其他方法，但都不可能十全十美，要么图片变形，要么部分被剪裁，要么容器留白。但这些方法仍然有使用价值：当无可选择的时候，总有一个参数是相对合适的。

红影

先来理解一下contain 和 cover，在no-repeat;情况下，且盒子尺寸大于图片，需要图片适应盒子。

那么cover是适应较短的一边，较长的一边被裁剪。
contain是适应较长的一边，较短的一边会用留白填充。——两者都不会让图片失真。

红影

object-fit的用法不是特别明白。也就是前面都是background-什么的，最后那句background-size: cover;被替换成object-fit: cover; ？不知道理解得对不对。

马黑黑

红影 发表于 2022-1-29 09:39
object-fit的用法不是特别明白。也就是前面都是background-什么的，最后那句background-size: cover;被替换 ...

object-fit，在父容器的装载对象设置，然后，它装载的东西，比如<img>发的图片，就按fit的设定进行自我调整。

用 background 方式其实发出来的不是图片，图片是做了容器的背景；而 object-fit 作用于<img>图片，它让图片按它的规范展示。

比较一下两种代码：

（一）background

.bkPic {
    width: 200px;
    height: 120px;
    background: url('图片') no-repeat center/cover;
}

<div class="bkPic"></div>

（二）object-fit

.objPic img{
    width: 200px;
    height: 120px;
    object-fit: cover;
}

<div class="objPic"><img src="图片" alt="" /></div>

红影

马黑黑 发表于 2022-1-29 10:54
object-fit，在父容器的装载对象设置，然后，它装载的东西，比如发的图片，就按fit的设定进行自我调整。
...

嗯嗯，一个是作用于背景，一个是作用于图片，原来是不同的用法。

红影

红影

红影

明白了，展现出来的结果差不多，但却是不同的方式，后者仍是俺设定被展示的图片，而前者做了容器的背景。

马黑黑

红影 发表于 2022-1-29 11:26
明白了，展现出来的结果差不多，但却是不同的方式，后者仍是俺设定被展示的图片，而前者做了容器的背景。

正确

红影

当需要使用图片，而图片是需要被延展或切割的时候，object-fit就很有用。

马黑黑

红影 发表于 2022-1-29 11:28
当需要使用图片，而图片是需要被延展或切割的时候，object-fit就很有用。

没错。我去着做一个用 object-fit 限制图片的帖子

红影

马黑黑 发表于 2022-1-29 11:29
没错。我去着做一个用 object-fit 限制图片的帖子

好啊，又可以有新应用可看了，真好

马黑黑

红影 发表于 2022-1-29 13:10
好啊，又可以有新应用可看了，真好

不过内容虽新使用起来却是简单的。两个要点：父框与子元素同尺寸；用 object-fit 属性规定图片（也可以是视频）的呈现方式。

object属性常用到的有两个值：cover和contain。其中，cover能保证横向和纵向有一个尺寸和父框一致，另一个则被裁剪一部分，以保证图片主体不变形；contain是让图片完整体现，父框横向或纵向会有一个留白。

红影

马黑黑 发表于 2022-1-29 13:37
不过内容虽新使用起来却是简单的。两个要点：父框与子元素同尺寸；用 object-fit 属性规定图片（也可以是 ...

这个里对这两个功能解释得非常清晰，太赞了！
原来对视频也有作用的啊。

马黑黑

红影 发表于 2022-1-29 15:04
这个里对这两个功能解释得非常清晰，太赞了！
原来对视频也有作用的啊。

可以的，不过我没试过

红影

马黑黑 发表于 2022-1-29 16:26
可以的，不过我没试过

不过有的时候视频裁掉一些，并不能感受得出来，除非裁得很多。
弹性布局加上这些命令，可以让人少计算很多数据了呢。

马黑黑

红影 发表于 2022-1-29 20:37
不过有的时候视频裁掉一些，并不能感受得出来，除非裁得很多。
弹性布局加上这些命令，可以让人少计算很 ...

是的。CSS不断进化，它会越来越强大

红影

马黑黑 发表于 2022-1-29 20:54
是的。CSS不断进化，它会越来越强大

非常人性化，真棒啊

马黑黑

红影 发表于 2022-1-29 21:33
非常人性化，真棒啊

其实过去大家发帖用的 table 什么的，也不错，只是w3c丢弃了几乎所有的table属性

红影

马黑黑 发表于 2022-1-29 21:38
其实过去大家发帖用的 table 什么的，也不错，只是w3c丢弃了几乎所有的table属性

我对那个本来也不熟，电脑方面我几乎没什么熟的