画像を縦横比率変えずに100vhで中央に配置したい

Question

縦長になってしまうのを直したいです。
見切れる部分は、overflow: hidden;で隠したいと考えています。

試したこと

中央にある和室の画像です

このように縦長になってしまいます

room-boxのなかに、roomが入っています。

Answer 1

見切れる部分は、overflow: hidden;で隠したいと考えています。

object-fit プロパティを使用しての実装ではいかがでしょうか？

#room img{
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

https://webdesignday.jp/inspiration/technique/css/7976/

Comments

[DrsriN]

ありがとうございます！！無事できました！！助かりました！！

[natsu_]

よかったーですー

[DrsriN]

すいません、再度確認したところできていませんでした????

[DrsriN]

なぜかobject-fit:cover;が効かないみたいなので試行錯誤したいと思います！