2

我在将display属性设置为box或inline-box( inline-flex) 的 div 内调整图像大小时遇到​​了一些问题。

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 中，结果是我所期望的，图像宽度为 280 像素，高度与宽度成正比，图像水平和垂直居中：http: //jsfiddle.net/AkwDk/。

然而，在 Firefox 和 Opera 中，结果不同之处在于忽略了图像宽度，而高度为 100%。margin: auto我能够通过添加到图像来解决高度问题，至少在 FF 中，但宽度问题仍然存在：http: //jsfiddle.net/AkwDk/1/。

有任何想法吗？

4

1 回答 1

2

关于 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;
}
于 2013-05-05T16:50:33.703 回答