<iframe src="xxxxx"></iframe> </div> CSS 。AtelierRoi"> <iframe src="xxxxx"></iframe> </div> CSS " />
アトリエロワ

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

HTML

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

CSS

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

アスペクト比

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