- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 amchart 并且我想在一页中显示多个图表(作为列),我的问题是无论我添加多少图表我都不想要滚动条(是的我希望它们被压扁)当我只显示一个图表时,我希望它是正常大小(不被压扁或变小)
我怎样才能做到这一点?我现在正在尝试使用图像,如果可行,我会在我的图表上进行。
html:
<div class="content">
<div class="row">
<div class="cell">
<img src="http://i.imgur.com/OUla6mK.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
</div>
</div>
</div>
CSS:
body{ overflow-y : hidden;}
.content {
background-color: yellow;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
background-color: red;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
margin: 10px;
background-color: green;
border: 1px solid red;
text-align: center;
}
img {max-height:100%;}
在 jsfiddle 上:http://jsfiddle.net/89dtxt6s/356/
谢谢!
最佳答案
第 1 步:将以下内容添加到 .row
以确保它填充视口(viewport)高度:
.row {
height: 100vh;
}
第 2 步:您需要为每个 .cell
提供 flex 显示。此外,您需要将 flex-basis
(速记的第三个参数)调整为 100%。最后,您需要将 min-height
设置为零,以便每个元素在需要时完全收缩。
.cell {
display: flex;
flex-direction: column;
flex: 1 1 100%; /* no longer auto */
min-height: 0;
}
第 3 步:为图像添加百分之一的宽度和高度。
img {
width: 100%;
height: 100%;
}
结果:图像变软。丑陋的?当然。但我不是在评判。
关于html - 当我使用 flexbox 添加更多图像时,图像会被压扁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45688267/
我知道以前也有人问过这个问题,但似乎没有答案适用于我。 我在 DIV 容器中有一个表。当表格内有 5 行时,会显示 x 轴上的滚动条,但是,您可以看到第 1 列中的内容被压扁了。 第 2 列和第 3
我在导航栏中设置了一个搜索栏作为标题 View 。在初始 View 中,搜索栏在中间均匀分布,两侧都有按钮。在此 View 中,后退按钮会插入搜索栏,使其变得不均匀。我尝试删除后退按钮的文本,但仍然无
我有一个按日期和“结果”分组的 Pandas DataFrame: api_logs.groupby([api_logs.index.date, 'Outcome']).size()
我是一名优秀的程序员,十分优秀!