我试图使用object-fit：contains来使我的图像在一些flexBox容器内响应,并且当图像调整大小时,布局似乎保持原始图像大小,导致滚动条出现.
使用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;
}
最佳答案
你拥有的是合乎逻辑的,你只需要理解对象适合的工作方式.让我们从一个更简单的例子开始：
.Box {
width:300px;
height:300px;
border:1px solid;
}
img {
width:100%;
height:100%;
object-fit:contain;
}
Box">
正如你所看到的,我使用了一个300×200的图像,我在300×300的盒子里伸展,因此我打破了它的比例,如果你检查图像的宽度/高度,你会发现它的尺寸仍然是300×300(应用对象之前的尺寸) ).
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;
}
Box">
现在图像的尺寸为150×150,在此内部我们将内容更改为包含效果.
所有值都会出现相同的逻辑
.Box {
width:300px;
height:300px;
border:1px solid;
}
img {
width:50%;
height:50%;
}
Box">
Box">
在你的例子中,你有同样的事情.如果没有对象,则图像如下所示
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;
}
相关文章
猜你在找的HTML相关文章
表格是html中经常使用到的，简单的使用可能很多人都没问题，但是更深入的了解的人恐怕不多，下面我们先来看一下如何使用。 是的上层标签必须在一个里面,它不能单独使用,相当于的属性标签.标示一个表格,标示
css的overflow属性规定内容溢出元素框时，如何处理溢出内容。overflow属性可能的值：visible：默认值，内容不会被修剪，会呈现在元素框之外。hidden：内容会被修剪，并且其余内容是不可见的。scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余内容，有可能元素框可以放下所有内容也会出现滚动条。auto：如果内容被修剪，则浏览器显示滚动条，以便查看其
网站图标favicon制作介绍：favicon.ico一般作为缩略的网站标志，他显示于浏览器的地址栏，表示网站的Logo，如下图红圈所示：下面介绍如何由.jpg或者.png图片生成.icon图标： http://www.bitbug.net/，打开该网址，即可在线将其他格式的图片生成icon格式的图标。一般生成的图标icon的尺寸选择32*32.在html页面中引用i
页面中一些诡异的现象1、有的时候body标签中多了style，这是因为 query版本1.11.0与2.0.0导致的，使用别的jquery版本，标签中的style就会没有了。2、有的时候，自己独立出来的一个html，里面有个div，设置属性position:absolute;在其他引用的地方能显示正常，但是在另一文件中显示诡异，如下面这幅图所示：在其他页面这个loading能居
gbk一般用于繁体中文，是国家标准gb2312基础上扩容后兼容gb2312的标准。文字编码(中英文)用双字节编码，是国家编码，通用性比utf8差，但utf8占用的数据库比gbk大gb2312一般用于简体中文utf8----是全球通用，用于解决国际上字符的一种多字节编码，英文使用8位(一个字节)，中文使用28位(3个字节)。现在一般都用utf8编码。允许含BOM，但一般不包含BOM。gb
在浏览网站的时候，会发现页面中包含多个html body等元素。因为html是弱标签，所以出现多个同样的标签，只要格式正确，是不会报错的。1、多个标签：取最外层标签2、多个 去第一个3、多个标签，则按照顺序全部列出来不顾规范声明：只有一个body html title head标签
浏览器不能显示修改后的样式：当我们修改了css文件之后，刷新浏览器，但是显示的页面的效果并不是我们修改之后的样式的效果，而是之前 没修改的样式；或者是修改了js文件，但是在刷新浏览器之后，也是没有实现我们修改之后的功能，功能还是没修改之前的功能。原因分析：可能的原因是浏览器有缓存的功能，可能缓存了没修改之前的版本，你可以查看下Sources下你修改过得文件，看看该文件是你修
title与alt的区别：对alt的说明：1、alt是html的属性2、alt属性用于元素img input textarea ，用于网页中图片无法正常显示时，给用户提供文字说明，使用户了解图像信息，起到替代图像的作 用对title的说明：1、title是html的属性，同时也是html的标签2、title作为属性时，可以为元素提供额外信息，可以作
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
