アトリエロワ

iframe縦横比固定・div正方形維持（レスポンシブ）/画像正方形固定

HTML：iframe

<div class="wrapper">
<iframe src="xxxxx"></iframe>
</div>

CSS

.wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;　//アスペクト比
  display:block;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML：imgを正方形に固定して画像を中央に配置する場合

<div class="imgfr">
<img src="img.png"/>
</div>

CSS

.imgfr {
  padding-bottom: 100%; //アスペクト比
  position: relative;
  display: block;
}
.imgfr img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

アスペクト比

16:9　　　　　56.25%
4:3　　　　　　　75%
3:2　　　　　　　66.6666%
正方形　　　　　　100%

divの高さを指定せずに正方形にする

HTMLとCSS

<div class=”square”></div>
.square {
　width: 100%;
　background: red;
　margin-right: 20px;
}
.square:before {
　content: "";
　display: block;
　padding-top: 100%;
}

HOME > html+css > iframe縦横比固定・div正方形維持（レスポンシブ）/画像正方形固定

html+css

html+css

+ More