前提・実現したいこと
親boxの中に子imgがあるというデザインになっています。
- 親boxの最大サイズは横980px, 縦551.25px。
- 親boxの中にどんな画像をいれてもトリミングされる事なく表示されるようにする。
1. 横長で大きい画像は横幅が980pxで縦横比を保つ。
2. 縦長で大きい画像は縦551.25pxで縦横比を保つ。
3. 小さい画像は原寸より拡大しつつ、親の縦or横の最大値で拡大を辞め、縦横比を保つ。
- 縦横比を維持したまま拡大、縮小。
発生している問題・エラーメッセージ
3. 小さい画像は拡大しつつ、親の縦or横の最大値で拡大を辞め、縦横比を保つ。ができない。 - 縦横比は保っているが拡大されず、オリジナルサイズで表示される。
該当のソースコード
HTML
1<div class="parent-box"> 2 <img class="child-img" src="xxx.jpg"> 3</div>
CSS
1.parent-box { 2 max-width: 980px; 3} 4 5.child-img { 6 display: block; 7 width: auto; 8 height: auto; 9 max-height: 551.25px; 10 margin: 0 auto; 11}
試したこと
CSS
1.parent-box { 2 max-width: 980px; 3 max-height: 551.25px; 4} 5 6.child-img { 7 display: block; 8 width: auto; 9 height: auto; 10 margin: 0 auto; 11}
⬆︎縦長の画像がmax-height: 551.25px;を突き抜け表示された。
CSS
1.parent-box { 2 max-width: 980px; 3} 4 5.child-img { 6 display: block; 7 width: 100%; 8 height: auto; 9 max-height: 551.25px; 10 margin: 0 auto; 11}
⬆︎縦横比が崩れて表示された。
補足情報(FW/ツールのバージョンなど)
以上です。よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/05 06:46