栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

为什么对象适合在flexbox中不起作用?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

为什么对象适合在flexbox中不起作用?

从规格:

object-fit
属性指定如何将替换元素的内容装配到通过其使用的高度和宽度建立的框中。

关键术语是: 根据其使用的高度和宽度安装到盒子中

图像将被替换,而不是其容器。并且由其使用的高度和宽度确定的框与图像本身有关,而不与容器有关。

因此,报废容器并使图像本身成为可弯曲的物品。

.container {  display: flex;  flex-direction: row;  width: 100%;}img {  object-fit: cover;  flex: 1;  margin-right: 1rem;  overflow: hidden;  height: 400px;}<div >  <img src="http://placehold.it/1920x1080">  <img src="http://placehold.it/1920x1080">  <img src="http://placehold.it/1920x1080">  <img src="http://placehold.it/1920x1080"></div>

额外细节

5.5。 调整对象大小:

object-fit
属性

object-fit
属性指定如何将替换元素的内容装配到通过其使用的高度和宽度建立的框中。

这是三个值:

  • cover

确定替换内容的大小,以在填充元素的整个内容框时保持其长宽比。

  • contain

替换后的内容的大小可保持其纵横比,同时适合元素的内容框。

  • fill

替换内容的大小可填充元素的内容框。

cover
所述图像保持其宽高比,并覆盖所有可用空间。使用此选项,大部分图像可能会在屏幕外裁剪。

随着

contain
纵横比也保持,但图像进行缩放以适应箱内。这可能会导致左侧和/或右侧的空白(人像适合),或顶部和/或底部的空白(横向适合)。该
object-position
属性可用于在其框内移动图像。

使用

fill
宽高比时,图像将被调整为适合盒子的大小。




转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/614903.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号