0

私が取り組んでいるレスポンシブ プロジェクトに流動的な画像を使用しようとしています。ただし、私が見たものはすべて、画像の最大幅を設定するように指示されただけで、機能するはずです。ここに示すように、px ベースのコンテナー幅を除いて、機能します: http://codepen.io/anon/pen/cCfsF

px ベースの親が流動的なイメージを持つことは可能ですか?

私のHTMLコードは次のとおりです。

<div class="container">
  <img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>
<div class="container2">
  <img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>

私のCSSは次のとおりです。

.container {
  width: 500px;
  background: #f30;
}
.container2 {
   width: 100%; 
    background: #f30;
}
img {
  max-width: 100%;
}
4

1 に答える 1

0

あなたの例で.containerは、500px の固定幅を持ち、子画像の幅は 100% であるため、画像は親コンテナーに合わせて拡大縮小されます。ただし、.container幅は固定なので、ウィンドウを縮小または拡大しても変化しません。

あなたが観察した.container2ように、ウィンドウ幅に対応するパーセンテージ幅の場合、それに応じて画像のサイズが変更されます。

あなたは正しい動作を見ているので、少なくともあなたが見ているレイアウトについては、あなたの質問に対する短い答えはノーです。

于 2013-07-04T00:10:15.523 に答える