2

親 div の幅になるように画像のサイズを変更しようとしています。通常は正常にwidth: 100%;動作しますが、親にdisplay: box;img がある場合、サイズは変更されません。子イメージを与えbox-flex: 1ても効果はありません。

<div style="display: -webkit-box; -webkit-box-pack: center; width: 100%;">
  <img src="foo.jpg" style="-webkit-box-flex: 1;" />
</div>
4

3 に答える 3

2

確かにこれは古い質問ですが、それでも検索に表示されるため、回答を更新したいと考えています。

現在、Chrome23とFirefoxNightly 21.0a1では、このレイアウトは、画像を親divのサイズに保ち、サイズを変更するように機能します（中央に配置することもできます）。

http://jsfiddle.net/qAErr/

HTML

<section id="holdMe">
  <div>
     <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5"/>
  </div>
</section>

CSS

#holdMe {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
    }
    #holdMe img {
      width: 100%;
    }
于 2013-02-20T14:36:18.887 に答える
2

多分あなたはこれを解決したかもしれませんが、あなたは使うことができます（mozillaの例を提供しています）

IMAGE {
  display: -moz-box;
  -moz-box-flex: 1;
}
#cont {
  -moz-box-orient: horizontal;
  display: -moz-box;
}

例をテストしていないため、最悪の場合、微調整が必​​要になりますが、それが正しいと確信しています。

于 2011-05-15T21:04:57.983 に答える
1

ブラウザ？

ベンダー プレフィックスなしでフレックスボックス仕様をサポートするブラウザーを知りません。

display: -moz-box;display: -webkit-box;など_

実際、私はあなたのコードをもう一度見ました...画像でフレックスを使用している場合、フレックスは幅を動的に定義するため、幅の宣言は必要ありません。

親 div の幅も定義する必要があります。

于 2011-03-26T22:24:33.043 に答える