2

displayプロパティがboxor 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% になるという点で結果が異なります。画像に追加することで、少なくとも FF で高さの問題を修正できましたmargin: autoが、幅の問題は残っています: 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 に答える