我在将 display
属性设置为 box
或 inline-box
的 div 内调整图像大小时遇到一些问题 (inline-flex
)。
CSS
.thumb {
height: 250px;
width: 300px;
/* Firefox */
display: -moz-inline-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari, Opera, and Chrome */
display: -webkit-inline-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: inline-flex;
box-pack: center;
box-align: center;
}
.thumb img {
width: 280px;
}
HTML
<div class="thumb">
<img src="image1.png" alt="Image 1" />
</div>
在Chrome中,结果是我所期望的,图像宽度为280px,高度与宽度成正比,并且图像水平和垂直居中:http://jsfiddle.net/AkwDk/ .
然而,在 Firefox 和 Opera 中,结果不同,图像宽度被忽略,而高度为 100%。我能够通过向图像添加 margin: auto
来解决高度问题,至少在 FF 中,但宽度问题仍然存在:http://jsfiddle.net/AkwDk/1/ .
有什么想法吗?
最佳答案
关于 Firefox,您必须了解的是,它对已弃用的 2009 Flexbox 草案的实现在很多方面都受到了破坏。好消息是 Firefox 很快就会实现 CR Flexbox 草案。
http://codepen.io/cimmanon/pen/prHKc
.thumb {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #eaeaea));
background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
background-image: -moz-linear-gradient(#fafafa, #eaeaea);
background-image: -o-linear-gradient(#fafafa, #eaeaea);
background-image: linear-gradient(#fafafa, #eaeaea);
height: 250px;
width: 300px;
margin: 10px;
border: 1px solid #CACACA;
border-radius: 3px;
display: -webkit-inline-box;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
vertical-align: text-top;
}
.thumb img {
max-width: 280px;
margin: 10px;
}
关于CSS Flexbox 模型和图像宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16386243/