我正在使用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%;}
on jsfiddle:http://jsfiddle.net/89dtxt6s/356/
谢谢!
答案 0 :(得分:1)
第1步:将以下内容添加到.row
以确保其填充视口高度:
.row {
height: 100vh;
}
第2步:您需要为每个.cell
提供一个弹性展示。此外,您需要将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%;
}
结果:柔和的图像。丑陋?当然。但是我没有评判。