BinaryDevelop
  1. ホーム
  2. html

[解決済み] 高さや幅が異なる画像をCSSで同じにするには？

2022-09-05 16:56:56

質問

商品写真で構成されるイメージウォールを作成しようとしています。 残念ながら、それらのすべてが異なる高さと幅である。 どのように私はすべての画像を同じサイズに見えるようにCSSを使用することができますか？ できれば100×100です。

高さと幅が100pxのdivを作り、それをどうにかして埋めようと考えていました。 どうすればいいのかわかりません。

どのように私はこれを達成することができますか？

どのように解決するのですか？

回答更新（IE11非対応） 

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

オリジナルの回答 

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}

<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します