[html] div의 종횡비를 유지하지만 CSS에서 화면 너비와 높이를 채우시겠습니까?

CSS특정 솔루션 을 원한다고 요청하셨습니다 . 종횡비를 유지하려면 높이를 원하는 종횡비로 나누어야합니다. 16 : 9 = 1.777777777778.

컨테이너의 올바른 높이를 얻으려면 현재 너비를 1.777777777778로 나누어야합니다. 당신은 width단지 CSS또는 백분율로 나눈 컨테이너의 확인을 할 수 없기 때문에 (내가 아는 한) CSS이것은 불가능합니다 JavaScript.

원하는 종횡비를 유지하는 작업 스크립트를 작성했습니다.

HTML

<div id="aspectRatio"></div>

CSS

body { width: 100%; height: 100%; padding: 0; margin: 0; }
#aspectRatio { background: #ff6a00; }

자바 스크립트

window.onload = function () {
    //Let's create a function that will scale an element with the desired ratio
    //Specify the element id, desired width, and height
    function keepAspectRatio(id, width, height) {
        var aspectRatioDiv = document.getElementById(id);
        aspectRatioDiv.style.width = window.innerWidth;
        aspectRatioDiv.style.height = (window.innerWidth / (width / height)) + "px";
    }

    //run the function when the window loads
    keepAspectRatio("aspectRatio", 16, 9);

    //run the function every time the window is resized
    window.onresize = function (event) {
        keepAspectRatio("aspectRatio", 16, 9);
    }
}

다음을 사용하여 function다른 비율로 다른 것을 표시 하려면 다시 사용할 수 있습니다.

keepAspectRatio(id, width, height);

답변

body {
  margin: 0;
  margin-top: 100px; /* simulating a header */
}

main {
  margin: 0 auto;
  max-width: calc(200vh - 200px);
}

section {
  padding-bottom: 50%;
  position: relative;
}

div {
  position:absolute;
  background-color: red;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<main>
  <section>
    <div></div>
  </section>
</main>