HTML 및 CSS를 통해서만 요소의 종횡비 고정

일단 결과를 보고 싶은 분들을 향해서.

소스 코드 및 샘플

만들고 싶은 물건(요건)

.

실장 해설

HTML은 매우 간단합니다.요점은 고정 종횡비의 요소(이 HTML에서 id가'ratio 16-9'인 요소)에 작은 요소 1개만 넣는 것이다.
index.html

<div id="ratio_16-9">
  {なにか要素一つ (例: YouTube 動画埋め込み)}
</div>

우선<div>에 설정<div id="ratio_16-9">과position.
이때 하위 원소가 없기 때문에 높이는overflow이다.
style.css

* {
  box-sizing: border-box;
}
 #ratio_16-9 {
  position: relative; /* relative は通常の位置を基準にする. */
  overflow: hidden; /* はみ出した部分を非表示にする. */
}

이어서 위조 요소를 사용하여 0의 공백 요소를 삽입한다.:before16:9로도 비율을 지정하면 요소의 너비를 기준으로 하고 padding-top라면 16:9이다.padding-bottom도 가능합니다.
이 위조원소56.25%에 따르면 높이는 가로75%(즉 너비 16:9)의 직사각형이다.
마지막으로 표시할 내용 스타일을 설정합니다.16:9의 높이와 너비에 내용을 표시합니다.
여기4:3로 설정하면 부요소:before의 왼쪽 상각을 원점으로 처리할 수 있다.
style.css

#ratio_16-9:before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 56.25%;
}