%指定で正方形のボックスを作り、はみ出た部分はhiddenまたはobject-fit: cover;したい。

％で正方形を指定した際に、はみ出た部分は削除し正方形のまま維持したいのですがうまくいきません。

アドバイスをお願いできないでしょうか？

以下、px単位で指定した場合には、中に入ってくる画像が縦長でも横長でも、元の正方形の形は崩さずうまく表示できるのですが、サイズを％で指定してしまうと、画像のサイズがばらばらで表示されてしまいます。

％で相対的なサイズ指定を行った場合でも比率を崩さずに表示するにはどのような指定を行えばよいでしょうか？

HTML
1<div id="box">
2<div class="img_cont><img src="./hoge.png"></div>
3<div class="img_cont><img src="./hoge.png"></div>
4<div class="img_cont><img src="./hoge.png"></div>
5</div>

CSS
1.img_cont img {
2	object-fit: cover;
3	width:100px;
4	height:100px;
5}
6
7または、
8
9.img_cont {
10    overflow: hidden;
11    width: 100px;
12    height: 100px;
13    position: relative;
14}

Lhankor_Mhy

2020/09/16 08:44

「%指定で正方形」とのことですが、width も height も %単位は親要素が基準だと思いますが、親要素が正方形である、という前提で考えてよいのでしょうか？

yukina00235

2020/09/17 10:31

有難うございます。まさにこちらのご指摘通りでした。親要素が可変なため今回の条件では厳しい感じでした、なので今回はpxで決めて指定したいと思います。有難うございました。㎜

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことでしょうか？

css
1.img_cont {
2   margin: 5px;
3    width: 10%;
4    height: 10%;
5    position: relative;
6}
7.img_cont:before{
8  content: "";
9  display: block;
10  padding-top: 100%;
11}
12
13img{
14  position: absolute;
15  width: 100%;
16  height: 100%;
17  top: 0;
18  right: 0;
19  bottom: 0;
20  left: 0;
21  
22  object-fit: cover;
23}