图片自适应容器有没有完美的方案（纯理论）
本帖最后由 马黑黑 于 2022-1-29 11:17 编辑 <br /><br /><style>.meBox p { padding: 8px; }
</style>
<div class="meBox">
<p>装载图片的box，也就是图片容器，如果设定了固定的高宽尺寸，其内的图片可以自适应高宽吗？</p>
<p>答案是：可以，但要付出牺牲。</p><p>最简单的方法是给 img 设置 100% 的 width 和 height，这样图片会铺满容器，缺点是图片可能会变形——当图片自身的高宽比例与容器的高宽比例不一致时。</p><p>最传统的方法是让图片以做容器的 background-image 出现，容器的 background-size 可以设置为 cover，如以下的简化写法：</p><p>background: url('图片地址') no-repeat center/cover;</p><p>同等于：</p><p>background-image: url('图片地址');<br>background-position: center center;<br>background-repeat: no-repeat;<br>background-size: cover;</p><p>以上这样的设定，可以保证图片铺满容器，并保证图片不会变形，效果为图片的高度和宽度有一样按比例给出完整的内容，另一样则会被裁减掉一部分。若用 contain 取代 cover，则图片是完美的，但容器或是横向或是纵向会留白，除非图片的高宽比例等于容器的高宽比例。</p><p>最新潮的方法用 object-fit 属性，与背景图相比，object-fit属性设定直接作用于 img 标签，并能让爬虫搜索到图片。记住，和上面代码示例一样，图片的容器是固定高宽尺寸的，我们的代码省略了这个设置：</p><p>object-fit: cover; /* contain */</p><p>object-fit 和背景图片的用法差不多，也是 cover 和 contain 等值，意义与效果也没有区别。</p><p>还有其他方法，但都不可能十全十美，要么图片变形，要么部分被剪裁，要么容器留白。但这些方法仍然有使用价值：当无可选择的时候，总有一个参数是相对合适的。</p>
</div>
先来理解一下contain 和 cover，在no-repeat;情况下，且盒子尺寸大于图片，需要图片适应盒子。
那么cover是适应较短的一边，较长的一边被裁剪。
contain是适应较长的一边，较短的一边会用留白填充。——两者都不会让图片失真。 object-fit的用法不是特别明白。也就是前面都是background-什么的，最后那句background-size: cover;被替换成object-fit: cover; ？不知道理解得对不对。 本帖最后由 马黑黑 于 2022-1-29 11:16 编辑
红影 发表于 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的设定进行自我调整。
...
嗯嗯，一个是作用于背景，一个是作用于图片，原来是不同的用法。
<style type="text/css">
.bkPic {
width: 200px;
height: 120px;
background: url('https://www.huachaowang.com/uc_server/data/avatar/000/00/00/02_avatar_middle.jpg') no-repeat center/cover;
}
</style>
<div class="bkPic"></div>
<style type="text/css">
.objPic img{
width: 200px;
height: 120px;
object-fit: cover;
}
</style>
<div class="objPic"><img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/00/02_avatar_middle.jpg" alt="" /></div> 明白了，展现出来的结果差不多，但却是不同的方式，后者仍是俺设定被展示的图片，而前者做了容器的背景。 红影 发表于 2022-1-29 11:26
明白了，展现出来的结果差不多，但却是不同的方式，后者仍是俺设定被展示的图片，而前者做了容器的背景。
正确 当需要使用图片，而图片是需要被延展或切割的时候，object-fit就很有用。 红影 发表于 2022-1-29 11:28
当需要使用图片，而图片是需要被延展或切割的时候，object-fit就很有用。
没错。我去着做一个用 object-fit 限制图片的帖子 马黑黑 发表于 2022-1-29 11:29
没错。我去着做一个用 object-fit 限制图片的帖子
好啊，又可以有新应用可看了，真好{:4_187:} 红影 发表于 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不断进化，它会越来越强大
非常人性化，真棒啊{:4_187:} 红影 发表于 2022-1-29 21:33
非常人性化，真棒啊
其实过去大家发帖用的 table 什么的，也不错，只是w3c丢弃了几乎所有的table属性 马黑黑 发表于 2022-1-29 21:38
其实过去大家发帖用的 table 什么的，也不错，只是w3c丢弃了几乎所有的table属性
我对那个本来也不熟，电脑方面我几乎没什么熟的{:4_173:}
页:
[1]
2