CSS object-fit：包含；在布局中保持原始图像宽度

Question

我正在尝试使用来使我的图像在某些flexbox容器内响应object-fit: contain，并且在调整图像的大小时，布局似乎保持原始图像的大小，从而导致出现滚动条。

使用Chrome开发工具检查图像的宽度后，该宽度仍然为1024（但是高度已适当减小）。

我是否缺少一些其他CSS属性？

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;

}


<div class="page">

  <div class="main-container">

    <div class="page-header">

      This is a header

    </div>

    <div class="half-containers">

      <img src='https://i.imgur.com/tqQvuFr.jpg' />

    </div>

    <div class="half-containers">

      <img src='https://i.imgur.com/tqQvuFr.jpg' />

    </div>

    <div class="page-footer">

      This is a footer

    </div>

  </div>

</div>

Answer 1

您拥有的是合乎逻辑的，您只需要了解其object-fit工作原理即可。让我们从一个简单的例子开始：

.box {

  width:300px;

  height:300px;

  border:1px solid;

}

img {

 width:100%;

 height:100%;

 object-fit:contain;

}


<div class="box">

  <img src="https://picsum.photos/300/200?image=1069">

</div>

如您所见，我使用了300x200在300x300框内拉伸的图像，因此破坏了它的比例，如果您检查图像的宽度/高度，您会发现它的尺寸仍然是静止的300x300（应用前的尺寸变小object-fit）。

从规格

object-fit属性指定如何 将 替换元素 的内容 适配到 由其使用的height和width建立 的框。

基本上，我们在 视觉上 更改图像的内容，以使其适合图像所建立的空间。object-fit不会更改图像的大小，而是使用该大小作为参考来更改其内部内容。

让我们以相同的示例并50%改为使用：

.box {

  width:300px;

  height:300px;

  border:1px solid;

}

img {

 width:50%;

 height:50%;

 object-fit:contain;

}


<div class="box">

  <img src="https://picsum.photos/300/200?image=1069">

</div>

现在，图像的尺寸为150x150，在其中，我们更改内容以具有 包含 效果。

所有值都将发生相同的逻辑

.box {

  width:300px;

  height:300px;

  border:1px solid;

}

img {

 width:50%;

 height:50%;

}


<div class="box">

  <img src="https://picsum.photos/300/200?image=1069" style="object-fit:contain;">

</div>

<div class="box">

  <img src="https://picsum.photos/300/200?image=1069" style="object-fit:cover;">

</div>

在您的示例中，您有相同的事情。没有object-fit图片如下

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;*/

}


<div class="page">

  <div class="main-container">

    <div class="page-header">

      This is a header

    </div>

    <div class="half-containers">

      <img src='https://i.imgur.com/tqQvuFr.jpg' />

    </div>

    <div class="half-containers">

      <img src='https://i.imgur.com/tqQvuFr.jpg' />

    </div>

    <div class="page-footer">

      This is a footer

    </div>

  </div>

</div>

添加object-fit不会更改其大小，只会更改我们看到的内容：

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;

}


<div class="page">

  <div class="main-container">

    <div class="page-header">

      This is a header

    </div>

    <div class="half-containers">

      <img src='https://i.imgur.com/tqQvuFr.jpg' />

    </div>

    <div class="half-containers">

      <img src='https://i.imgur.com/tqQvuFr.jpg' />

    </div>

    <div class="page-footer">

      This is a footer

    </div>

  </div>

</div>

现在，另一个问题是您的图像的宽度为，1024px而flex项目由于min- width约束而不会超出其内容大小，因此为了获得所需效果，您需要添加的内容是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*/

}


<div class="page">

  <div class="main-container">

    <div class="page-header">

      This is a header

    </div>

    <div class="half-containers">

      <img src='https://i.imgur.com/tqQvuFr.jpg' />

    </div>

    <div class="half-containers">

      <img src='https://i.imgur.com/tqQvuFr.jpg' />

    </div>

    <div class="page-footer">

      This is a footer

    </div>

  </div>

</div>

您也可以考虑相同的输出，background-image并且由于没有更多内容，因此无需再background-size:contain为min- width约束而烦恼

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;

}


<div class="page">

  <div class="main-container">

    <div class="page-header">

      This is a header

    </div>

    <div class="half-containers">

    </div>

    <div class="half-containers">

    </div>

    <div class="page-footer">

      This is a footer

    </div>

  </div>

</div>