写真内の画像のアスペクト比

Question

次のようなキャプションが付いた画像があります:

<figure>
<img src="image.jpg"/>
<figcaption>タイトル</figcaption>
</figure>

CSS には img{max-width:100%} もあります。

画像の幅と高さの両方を設定し、幅が設定値を下回った場合でも縦横比を維持したいと考えています。そこで、次のようなコードを試してみました。

<figure>
<img src="image.jpg" width="100" height="200" style="object-fit:contain"/>
<figcaption>タイトル</figcaption>
</figure>

これはおおよその希望通りですが、画像が「レターボックス化」されている場合、タイトルは画像の下部からかなり離れています。

タイトルを画像の下部にぴったりと合わせたまま、希望の結果を得る方法はありますか?

Answer 1

object-fit: contain を使用している場合は、画像全体が親要素に収まる必要があるため、画像の元のアスペクト比がすでに保持されています。したがって、画像の元の幅が 100px、高さが 150px で、画像を width: 100px および height: 200px に設定した場合、画像の高さはそのままになります。 150 ピクセル、ただし ## 内 #figure 要素の上部と下部にさらに 25 ピクセルのスペースが追加されます。

この問題を解決するには、高さを「自動」に設定するだけです。

リーリー

ここで、実際に幅と高さを定義し、画像をそれらの寸法に強制的に適合させたい場合は、

object-fit: contains 以外のものを使用する必要があります。他のオプションについては こちら をご覧ください。ただし、figure 要素の幅/高さを設定し、そのスペースを画像で埋めたい場合もあります。この場合、次のようにすることができます: リーリー