このスレッドを見つけました —画像の縦横比を維持しながら <div> を埋めるために画像をストレッチするにはどうすればよいですか? —それは私が望んでいることではありません。
特定のサイズの div とその中に画像があります。画像が横長か縦長かに関係なく、常にdiv に画像を入力したいと思います。また、画像が切り取られていても問題ありません (div 自体にオーバーフローが隠されています)。
したがって、画像が縦長の場合は、縦長になりたいwidth
ので100%
、height:auto
比率を維持します。画像が横向きの場合は、自動height
にしたいです。複雑ですね。100%
width to be
<div class="container">
<img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>
どうすればいいのかわからないので、私が言いたいことの簡単なイメージを作成しました。私はそれを適切に説明することさえできません。
だから、私はこれを尋ねる最初の人ではないと思います. しかし、私はこれに対する解決策を本当に見つけることができませんでした。これを行うための新しい CSS3 の方法があるかもしれません - 私はフレックスボックスを考えています。何か案が?多分それは私が思っているよりも簡単ですか?