<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正方形維持(レスポンシブ)