我正在尝试使用 flex
将 img
简单地垂直居中在 div
中,但它在每个浏览器中的工作方式不同。
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: flex-start;
}
.flex-item {
height: 222px;
width: 200px;
border: 1px solid lightgray;
padding: 5px;
margin: 5px;
}
.flex-item img {
max-width: 100%;
max-height: 100%;
align-self: center;
-webkit-align-self: center;
margin: auto;
}
.item-image {
border: 1px solid lightgray;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 190px;
height: 120px;
}
<div class="flex-container">
<div class="flex-item">
<div class="item-image">
<img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
</div>
</div>
</div>
https://jsfiddle.net/e0m2d6hx/
它在 chrome 中很好,但在 IE 和 FF 中它似乎不适用于 max-width
。
谁能帮我解决这个问题?我知道我可以在没有 flex
的情况下将 img
居中,但我想了解这一点。
最佳答案
如何修复 IE 和 Firefox
以下更改应该会在 Chrome、Firefox 和 IE 中产生相同的结果:
- 将
flex: 0 0 auto;
添加到.flex-item img
。这修复了 IE - 将
object-fit: scale-down;
添加到.flex-item img
。这修复了 Firefox
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: flex-start;
}
.flex-item {
height: 222px;
width: 200px;
border: 1px solid lightgray;
padding: 5px;
margin: 5px;
}
.flex-item img {
flex: 0 0 auto;
max-width: 100%;
max-height: 100%;
align-self: center;
-webkit-align-self: center;
margin: auto;
object-fit: scale-down;
}
.item-image {
border: 1px solid lightgray;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 190px;
height: 120px;
}
<div class="flex-container">
<div class="flex-item">
<div class="item-image">
<img src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg">
</div>
</div>
<div class="flex-item">
<div class="item-image">
<img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
</div>
</div>
<div class="flex-item">
<div class="item-image">
<img src="http://www.pinaldave.com/bimg/ilovesamples.jpg">
</div>
</div>
<div class="flex-item">
<div class="item-image">
<img src="http://appslova.com/wp-content/uploads/2014/11/Android-.png">
</div>
</div>
</div>
JS fiddle : https://jsfiddle.net/7yyf3nob/
为什么会这样?
不幸的是,我无法解释为什么浏览器之间的结果如此不同,除了看起来 img
的自然调整大小属性在使用 flexbox
时会丢失> IE 和 Firefox 中的模型。 flexbox
仍然是一个相对较新的模型,供应商仍在改进他们的实现。
关于css - flexbox 中 img 的最大宽度不保持纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31853749/