1

ページ幅が 50% の列にさまざまなサイズの画像が表示されるシナリオがあります。

列幅が画像のネイティブ幅を超える大きな画面では、画像は流動的でありながらネイティブ幅にレンダリングする必要があります。

画像のサイズはさまざまです (つまり、横向きと縦向き)。そのため、img 要素に単一の幅または高さを適用することはできません。親要素を、表示される最大の画像幅に一致する最大幅に制限することはできますが、幅が狭い画像は、流動的になると幅が広すぎます。

基本的な構造は次のとおりです。

<div class="column">
  <figure>
    <img>
  </figure>
</div>

この CSS では:

.column {width:50%;}
.column figure {
    display:block;
    margin:0 auto;
    width:100%;
    max-width:800px; /* the largest image width */
    text-align: center; /* to center images of lesser width */
}
.column img {?}

方向を示すデータ属性を img 要素に追加し、これを使用して max-width を適用することはできますが、これにはサイト エディターの作業が増えるため、回避する必要があります。したがって、私は CSS のみの解決策を探していますが、行き詰まっています。

何か案は？

4

1 に答える 1

0

もう一度使用max-widthして、イメージをコンテナーの幅まで完全に拡大できるようにしますが、それ以上は拡大しないでください。何かのようなもの：

.column img {
    max-width: 100%;
}

これにより、必要に応じて画像をレスポンシブにすることができます。親のサイズに合わせてスケーリングしますが、ネイティブの幅を超えることはありません。いくつかのランダムな画像を使用したデモを次に示します。十分なスペースが与えられたときに、ネイティブに小さい画像と大きい画像が異なる幅で停止することに注意してください。

.column {
  width: 50%;
}
.column figure {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
  /* the largest image width */
  text-align: center;
  /* to center images of lesser width */
}
.column img {
  max-width: 100%;
}
<div class="column">
  <figure>
    <img src="http://www.ltsgrill.com/wp-content/uploads/2014/09/red_lobster.jpg" />
  </figure>
</div>

<div class="column">
  <figure>
    <img src="http://www.mjseafood.com/_assets/400x300/Crayfish.jpeg" />
  </figure>
</div>

于 2016-05-25T20:02:15.727 に答える