☰

フレックスボックスレイアウトで画像のサイズが変更されない 質問する

tag-icon • tag-icon html css flexbox responsive-images
フレックスボックスレイアウトで画像のサイズが変更されない 質問する

私はアドバイスに従おうとしたこの答え、そしてこれに示すようにコードペンただし、画面が非常に狭く、1 列に 1 つしか表示されない場合を除き、伸縮する必要のある画像は元の寸法を維持します。

実際のページには、同様の状況の別の div セットがあります。サイド div が縮小されると、ページがはるかに広い範囲の幅で機能するようになります。

それがラップされている divflex: auto;には があり、img {width: 90%; height: auto;}その中のすべての画像については、その div の親にも がありますstyle="flex: 0 1 250px;"。

がここにありますコードペンそれの。

単純な間違いがあると思いますが、そうでなければ、画像を現在ある div の背景にして、background-size: 100% auto;その上に設定することになると思います。

section {
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 3vw;
  margin-left: 6vw;
}
.outerDiv {
  background-color: rgba(50, 50, 0, 0.5);
}
.innerDiv {
  background-color: rgba(10, 10, 10, 0.6);
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  margin: 15px;
}
.innerDiv p {
  padding: 6px 18px 0 15px;
}
.imgResize {
  flex: auto;
  align-self: center;
  padding: 15px;
}
.imgResize img {
  width: 90%;
  height: auto;
}
<section>

  <div class="outerDiv">
    <div class="innerDiv" style="flex: 0 1 250px;">
      <h2>The Rocket Equation</h2>
      <p>Mass ratio:</p>
      <div class="imgResize">
        <a href="rotovator.html">
          <img src="http://www.moonwards.com/img/animatedRotovatorLink.png">
        </a>
      </div>
    </div>
  </div>

  <div class="outerDiv">
    <div class="innerDiv">
      <h2>Suborbital Hop</h2>
      <img src="http://www.moonwards.com/img/mapmini.jpg" width="512" height="256">
      <canvas id="subOrbitalCanvas" width="512" height="256"></canvas>
    </div>
  </div>

</section>

ベストアンサー1

フレックス アイテムの初期設定は ですmin-width: auto。つまり、デフォルトではフレックス アイテムはコンテンツのサイズよりも小さく縮小できません。

この場合、section要素はプライマリ フレックス コンテナーになります。

フレックスアイテムは です.outerDiv。

これらのフレックス アイテムには画像が含まれているため、画像のサイズより小さくすることはできません。これを解決するには、 でデフォルトを上書きしますmin-width: 0。

改訂版コードペン

さて、これでアイテムはコンテンツを超えて縮小できるようになりましたが、画像はまだ柔軟性がありません。

これを修正するには、次の操作を実行します。

img { width: 100%; height: auto; }

改訂版コードペン

さらに詳しい情報は次のとおりです:フレックスアイテムがコンテンツサイズを超えて縮小されないのはなぜですか?

おすすめ記事