- 首页
- 前端开发
- CSS 对象适配:包含；在布局中保持原始图像宽度
CSS 对象适配:包含；在布局中保持原始图像宽度
[英] CSS object-fit: contain; is keeping original image width in layout
本文介绍了CSS 对象适配:包含；在布局中保持原始图像宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 object-fit:contain 使我的图像在某些 flexbox 容器内具有响应性，并且当图像调整大小时，布局似乎保持原始图像大小，导致滚动条出现.
使用Chrome Dev Tools查看图片的宽度，宽度仍然是1024(不过高度已经适当降低了.)
(我从
html,身体 {边距:0；高度:100%；}.页 {高度:100%；显示:弹性；}.主容器{弹性:1 1 0；显示:弹性；弹性方向:列；}.半容器{弹性:0 1 50%；溢出:自动；box-sizing: 边框框；边框:0.5px纯红色；显示:弹性；}.页头{弹性:0 0 自动；背景颜色:#dcdcdc；}.页脚{弹性:0 0 自动；背景颜色:#dcdcdc；}图片{适合对象:包含；}
<div class="main-container"><div class="page-header">这是一个标题
<div class="半容器"><img src='https://i.imgur.com/tqQvuFr.jpg'/>
<div class="半容器"><img src='https://i.imgur.com/tqQvuFr.jpg'/>
<div class="page-footer">这是一个页脚
解决方案
你所拥有的是合乎逻辑的，你只需要了解 object-fit 是如何工作的.让我们从一个更简单的例子开始:
.box {宽度:300px；高度:300px；边框:1px 实心；}图片{宽度:100%；高度:100%；适合对象:包含；}
<img src="https://picsum.photos/300/200?image=1069">
如你所见，我使用了一个 300x200 图像，我在 300x300 框内拉伸，因此我打破了它的比例，如果你检查图像的宽度/高度你会看到它的尺寸仍然是300x300(应用object-fit之前的尺寸).
来自规范:
<块引用>
object-fit 属性指定如何替换元素的内容适合由其使用的高度和宽度建立的框.
基本上，我们视觉改变图像的内容，使其适合图像建立的空间.object-fit 不会改变图像的大小，而是使用该大小作为参考来更改其内部内容.
让我们以相同的例子并使用 50% 代替:
.box {宽度:300px；高度:300px；边框:1px 实心；}图片{宽度:50%；高度:50%；适合对象:包含；}
<img src="https://picsum.photos/300/200?image=1069">
现在图像的尺寸为 150x150，我们在其中更改内容以具有 contain 效果.
所有值都会发生相同的逻辑
.box {宽度:300px；高度:300px；边框:1px 实心；}图片{宽度:50%；高度:50%；}
<img src="https://picsum.photos/300/200?image=1069" style="object-fit:contain;">
<div class="box"><img src="https://picsum.photos/300/200?image=1069" style="object-fit:cover;">
<小时>在你的例子中，你有同样的事情.没有 object-fit 图像如下
html,身体 {边距:0；高度:100%；}.页 {高度:100%；显示:弹性；}.主容器{弹性:1 1 0；显示:弹性；弹性方向:列；}.半容器{弹性:0 1 50%；溢出:自动；box-sizing: 边框框；边框:0.5px纯红色；显示:弹性；}.页头{弹性:0 0 自动；背景颜色:#dcdcdc；}.页脚{弹性:0 0 自动；背景颜色:#dcdcdc；}图片{/*对象适合:包含；*/}
<div class="main-container"><div class="page-header">这是一个标题
<div class="半容器"><img src='https://i.imgur.com/tqQvuFr.jpg'/>
<div class="半容器"><img src='https://i.imgur.com/tqQvuFr.jpg'/>
<div class="page-footer">这是一个页脚
添加 object-fit 不会改变它的大小，只会改变我们看到的:
html,身体 {边距:0；高度:100%；}.页 {高度:100%；显示:弹性；}.主容器{弹性:1 1 0；显示:弹性；弹性方向:列；}.半容器{弹性:0 1 50%；溢出:自动；box-sizing: 边框框；边框:0.5px纯红色；显示:弹性；}.页头{弹性:0 0 自动；背景颜色:#dcdcdc；}.页脚{弹性:0 0 自动；背景颜色:#dcdcdc；}图片{适合对象:包含；}
<div class="main-container"><div class="page-header">这是一个标题
<div class="半容器"><img src='https://i.imgur.com/tqQvuFr.jpg'/>
<div class="半容器"><img src='https://i.imgur.com/tqQvuFr.jpg'/>
<div class="page-footer">这是一个页脚
现在，另一个问题是您的图像宽度为 1024px 并且弹性项目不会 由于 min-width 约束而超出其内容大小，因此您需要添加什么以获得所需的效果是 min-width:0.这样做您将不再有溢出问题，然后您的图像将包含在 flexbox 布局定义的区域内.
html,身体 {边距:0；高度:100%；}.页 {高度:100%；显示:弹性；}.主容器{弹性:1 1 0；显示:弹性；最小宽度:0；/*添加*/弹性方向:列；}.半容器{弹性:0 1 50%；溢出:自动；box-sizing: 边框框；边框:0.5px纯红色；显示:弹性；}.页头{弹性:0 0 自动；背景颜色:#dcdcdc；}.页脚{弹性:0 0 自动；背景颜色:#dcdcdc；}图片{适合对象:包含；最小宽度:0；/*添加*/}
<div class="main-container"><div class="page-header">这是一个标题
<div class="半容器"><img src='https://i.imgur.com/tqQvuFr.jpg'/>
<div class="半容器"><img src='https://i.imgur.com/tqQvuFr.jpg'/>
<div class="page-footer">这是一个页脚
考虑到 background-image 和 background-size:contain，您也可以拥有相同的输出，这样您就不必再为 min-width<而烦恼了/code> 限制，因为没有更多内容
html,身体 {边距:0；高度:100%；}.页 {高度:100%；显示:弹性；}.主容器{弹性:1 1 0；显示:弹性；弹性方向:列；}.半容器{弹性:0 1 50%；溢出:自动；box-sizing: 边框框；边框:0.5px纯红色；显示:弹性；背景:url(https://i.imgur.com/tqQvuFr.jpg)中心/包含不重复；}.页头{弹性:0 0 自动；背景颜色:#dcdcdc；}.页脚{弹性:0 0 自动；背景颜色:#dcdcdc；}
<div class="main-container"><div class="page-header">这是一个标题
<div class="半容器">
<div class="半容器">
<div class="page-footer">这是一个页脚
I'm trying to make my images responsive inside some flexbox containers using object-fit: contain, and while the images do resize, the layout seems to be keeping the original image size, causing a scrollbar to appear.
Checking the width of the image using Chrome Dev Tools shows that the width is still 1024 (however the height has been reduced appropriately.)
(I've taken inspiration from Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
to get to this point)
Am I missing some additional CSS attributes?
JSFiddle: https://jsfiddle.net/w6hgqf18/1/
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>
解决方案
What you have is logical, you simply need to understand how object-fit works. Let's start with an easier example:
.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>
As you can see I have used a 300x200 image that I stretch inside the 300x300 box thus I break its ratio and if you check the width/height of the image you will see that it's dimension is still 300x300 (the dimenstion before applying object-fit).
From 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.
Basically, we visually change the content of the image so it fit the space established by the image. object-fit doesn't change the size of the image but uses that size as a reference to change its content inside.
Let's take the same example and use 50% instead:
.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>
Now the image has a dimension of 150x150 and inside this we change the content to have the contain effect.
Same logic will happen with all the values
.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>
In you example you are having the same thing. without object-fit the image is like below
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>
Adding object-fit won't change its size but only what we see:
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>
Now, the other issue is that your image has a width of 1024px and a flex items will not stretch past its content size due to the min-width constraint so what you need to add in order to obtain the needed effect is min-width:0. Doing so you will no more have overflow issue then your image will be contained inside the area defined by the flexbox layout.
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>
You can also have the same output considering background-image and background-size:contain where you no more have to bother with the min-width contraint since there is no more content
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>
这篇关于CSS 对象适配:包含；在布局中保持原始图像宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
