html – CSS object-fit：contains;在布局中保持原始图像宽度

发布时间：2020-12-14 22:41:25 所属栏目：资源来源：网络整理

导读：我试图使用object-fit：contains来使我的图像在一些flexbox容器内响应,并且当图像调整大小时,布局似乎保持原始图像大小,导致滚动条出现. 使用Chrome开发工具检查图像的宽度表明宽度仍为1024(但高度已适当降低.) (我从Auto Resize Image in CSS FlexBox Layou

我试图使用object-fit：contains来使我的图像在一些flexbox容器内响应,并且当图像调整大小时,布局似乎保持原始图像大小,导致滚动条出现.

使用Chrome开发工具检查图像的宽度表明宽度仍为1024(但高度已适当降低.)

(我从Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
中获取灵感来达到这一点)

我错过了一些额外的CSS属性吗？

JSFiddle：https://jsfiddle.net/w6hgqf18/1/

problem

html,body {
  margin: 0;
  height: 100%;
}

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  object-fit: contain;
}


最佳答案
你拥有的是合乎逻辑的,你只需要理解对象适合的工作方式.让我们从一个更简单的例子开始：

.box {
  width:300px;
  height:300px;
  border:1px solid;
}
img {
 width:100%;
 height:100%;
 object-fit:contain;
}

正如你所看到的,我使用了一个300×200的图像,我在300×300的盒子里伸展,因此我打破了它的比例,如果你检查图像的宽度/高度,你会发现它的尺寸仍然是300×300(应用对象之前的尺寸) ).
从the specification开始：


The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

基本上,我们在视觉上改变图像的内容,使其适合图像建立的空间. object-fit不会更改图像的大小,但会使用该大小作为参考来更改其内部内容.
让我们采用相同的例子并使用50％代替：

.box {
  width:300px;
  height:300px;
  border:1px solid;
}
img {
 width:50%;
 height:50%;
 object-fit:contain;
}

现在图像的尺寸为150×150,在此内部我们将内容更改为包含效果.
所有值都会出现相同的逻辑

.box {
  width:300px;
  height:300px;
  border:1px solid;
}
img {
 width:50%;
 height:50%;
}

在你的例子中,你有同样的事情.如果没有对象,则图像如下所示

html,body {
  margin: 0;
  height: 100%;
}

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  /*object-fit: contain;*/
}

添加对象适合不会改变其大小,只会改变我们看到的内容：

html,body {
  margin: 0;
  height: 100%;
}

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  object-fit: contain;
}

现在,另一个问题是您的图像宽度为1024px,而flex项目不会是stretch past its content size due to the min-width constraint,因此您需要添加以获得所需效果的是min-width：0.这样做就不会出现溢出问题,那么您的图像将包含在flexbox布局定义的区域内.

html,body {
  margin: 0;
  height: 100%;
}

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  min-width: 0; /*added*/
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  object-fit: contain;
  min-width: 0; /*added*/
}

考虑到背景图像和背景大小,你也可以有相同的输出：包含你不再需要打扰最小宽度约束的地方,因为没有更多的内容

html,body {
  margin: 0;
  height: 100%;
}

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
  background:url(https://i.imgur.com/tqQvuFr.jpg) center/contain no-repeat;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!