Q&A
本質としてはレスポンシブの話ではないように見えます。
実際にどのような画像を元にどういうコードで対応しようとしているのか提示してください。
前提・実現したいこと
cssの画像のレスポンシブについて質問があります。
サイズが異なる画像を、大きさを同じにして、かつ縦横同じ割合で縮むようにしたいです。
これを実現したい場合、元の画像ファイル自体のサイズをトリミングする必要があるのでしょうか？
サイズの違いが障壁となり横のサイズ、縮み具合は同じにできますが、縦は画像によって異なってしまいます。。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./styles.css" /> <title>スライドショー</title> </head> <body> <ul id="slideshow"> <li> <img class="img_item1" src="./img/photo14.jpg" alt="画像" /> </li> <li> <img class="img_item1" src="./img/macbook-at-the-coffee-shop.jpg" alt="画像" /> </li> <li> <img class="img_item1" src="./img/canstockphoto2561392.jpg" alt="画像" /> </li> <li><img class="img_item1" src="./img/classbg.jpg" alt="画像" /></li> <li> <img class="img_item1" src="./img/communication-304x203.png" alt="画像" /> </li> <li> <img class="img_item1" src="./img/photo14.jpg" alt="画像" /> </li> <li> <img class="img_item1" src="./img/macbook-at-the-coffee-shop.jpg" alt="画像" /> </li> <li> <img class="img_item1" src="./img/canstockphoto2561392.jpg" alt="画像" /> </li> <li><img class="img_item1" src="./img/classbg.jpg" alt="画像" /></li> <li> <img class="img_item1" src="./img/communication-304x203.png" alt="画像" /> </li> </ul> body { height: 100vh; } #slideshow { margin: auto; width: 80%; height: 30%; list-style: none; padding: 0; } .img_item1 { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
補足願います。以下のケースでしたらどうあってほしいでしょうか。
画像A 200*100
画像B 100*200
同じ大きさにするということは、画像Bを200*100にしたい、ということですか？
画像Bを 200*400 にして、上下150pxずつを切り取り、200*100にする、みたいなイメージでしょうか？
Lhankor_Mhyさんのおっしゃる通りです
（例）
元の画像サイズ
画像A 100 200
画像B 300 200
画像C 100 400
これらの画像を同じ大きさにして...
画像 A 500 500
画像 B 500 500
画像C 500 500
ページを縮めます....
画像A 300 300
画像B 300 300
画像C 300 300
いい感じに元のサイズが異なる画像が同じサイズ同じ割合で縮む
これを実現したいです。
現状は横幅だけが大きさ縮み方が等しく、縦はその画像の比になっています
回答1件
0
ベストアンサー
こういう感じですかね……？
html
1<div> 2 <img src="http://placehold.jp/100x200.png" alt=""> 3 <img src="http://placehold.jp/300x200.png" alt=""> 4 <img src="http://placehold.jp/100x400.png" alt=""> 5</div>
css
1img{ 2 width: 20vw; 3 height: 20vw; 4 object-fit: cover; 5}
投稿2021/04/09 10:39
総合スコア36960
あなたの回答
tips
プレビュー
