나는 만들고 싶다 div창의 너비가 변경됨에 따라 너비 / 높이를 변경할 수 .

가로 세로 비율을 유지하면서 너비에 따라 높이를 변경할 수있는 CSS3 규칙이 있습니까?

JavaScript를 통해이 작업을 수행 할 수 있지만 CSS 만 사용하는 것이 좋습니다.

다음 <div>과 같이 백분율 값 으로 래퍼 를 만드십시오 padding-bottom.

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

/* demonstration purposed only : non-essential */
.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

<div class="demoWrapper">
  <div></div>
</div>

결과는 <div> (3 종횡비 4)의 높이와 그 컨테이너의 폭의 75 % 이상.

이것은 패딩에 대한 사실에 의존합니다.

백분율은 생성 된 상자의 포함 블록 [...]의 너비 와 관련하여 계산됩니다 (출처 : w3.org , 강조 광산).

다른 종횡비 및 100 % 너비의 패딩 하단 값 :

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

div에 내용 배치 :

div의 가로 세로 비율을 유지하고 내용이 늘어나지 않도록하려면 다음을 사용하여 절대적으로 배치 된 자식을 추가하고 래퍼의 가장자리까지 늘려야합니다.

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

다음은 데모 와 다른 깊이있는 데모입니다.

vw 단위 :

요소 vw의 너비와 높이 에 모두 단위를 사용할 수 있습니다 . 이를 통해 뷰포트 너비를 기준으로 요소의 종횡비를 유지할 수 있습니다.

vw : 뷰포트 너비의 1/100 [ MDN ]

또한, 당신은 또한 사용할 수있는 vh뷰포트의 높이, 또는 vmin/ vmax(토론 뷰포트 크기의 작은 / 큰를 사용하는 여기 ).

예 : 1 : 1 종횡비

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

다른 종횡비의 경우 다음 표를 사용하여 요소 너비에 따라 높이 값을 계산할 수 있습니다.

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

예 : 제곱 div의 4x4 그리드

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

여기입니다 이 데모와 바이올린 과 여기에 만들 수있는 솔루션입니다 verticaly 및 수평입니다 중심 내용 사각형의 반응 그리드를 .

vh / vw 장치에 대한 브라우저 지원은 IE9 이상 입니다. 자세한 정보는 canIuse 참조

CSS를 사용 하여이 작업을 수행하는 방법을 찾았지만 웹 사이트의 흐름에 따라 변경 될 수 있으므로주의해야합니다. 웹 사이트의 유동적 인 너비 부분에 일정한 종횡비의 비디오를 포함시키기 위해이 작업을 수행했습니다.

다음과 같은 내장 비디오가 있다고 가정 해보십시오.

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

그런 다음 "video"클래스를 사용하여이 모든 것을 div 안에 넣을 수 있습니다. 이 비디오 클래스는 아마도 자체적으로 직접적인 높이 제한이없는 웹 사이트의 유동 요소 일 것입니다. 그러나 브라우저 크기를 조정하면 웹 사이트의 흐름에 따라 너비가 변경됩니다. 이것은 비디오의 특정 종횡비를 유지하면서 내장 비디오를 가져 오려는 요소입니다.

이를 위해 "video"클래스 div 내의 포함 된 개체 앞에 이미지를 넣습니다.

!!! 중요한 부분은 이미지에 유지하려는 올바른 종횡비가 있다는 것입니다. 또한 이미지의 크기가 레이아웃을 기준으로 비디오 (또는 AR을 유지 관리하는 모든 것)가 예상하는 최소 크기보다 작게 설정해야합니다. 이렇게하면 이미지 크기가 백분율로 조정될 때 이미지 해상도에 잠재적 인 문제가 발생하지 않습니다. 예를 들어 3 : 2의 종횡비를 유지하려면 3x2 픽셀 이미지 만 사용하지 마십시오. 상황에 따라 작동 할 수도 있지만 테스트하지 않았으므로 피하는 것이 좋습니다.

웹 사이트의 유체 요소에 대해 이와 같이 최소 너비가 이미 설정되어 있어야합니다. 그렇지 않은 경우 브라우저 창이 너무 작아 질 때 요소가 잘 리거나 겹치지 않도록하려면 이렇게하는 것이 좋습니다. 어느 시점에서 스크롤 막대를 사용하는 것이 좋습니다. 전화 친화적 인 사이트를 다루지 않으면 화면 해상도가 작아지지 않기 때문에 웹 페이지의 너비는 약 600px (고정 너비 열 포함) 정도입니다. !!!

나는 완전히 투명한 png를 사용하지만 실제로 그것을 올바르게하면 그것이 중요하다고 생각하지 않습니다. 이처럼 :

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

이제 다음과 유사한 CSS를 추가 할 수 있습니다.

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

또한 객체 내에서 명시 적 높이 또는 너비 선언을 제거하고 일반적으로 복사 / 붙여 넣기 포함 코드와 함께 제공되는 포함 태그를 확인하십시오.

작동 방식은 비디오 클래스 요소의 위치 속성과 특정 종횡비를 유지하려는 항목에 따라 다릅니다. 요소에서 크기를 조정할 때 이미지가 적절한 종횡비를 유지하는 방식을 이용합니다. 비디오 클래스 요소에있는 다른 요소는 이미지에 의해 조정되는 비디오 클래스 요소의 너비 / 높이를 100 %로 강제 설정하여 동적 이미지가 제공하는 부동산을 최대한 활용하도록합니다.

멋지다?

자신의 디자인으로 작동하려면 약간 놀아야 할 수도 있지만 실제로는 놀랍도록 잘 작동합니다. 일반적인 개념이 있습니다.

Elliot는이 솔루션에 영감을주었습니다. 감사합니다.

aspectratio.png 내 경우에는 30x10 픽셀의 원하는 종횡비의 크기를 가진 완전히 투명한 PNG 파일입니다.

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

참고 : background-size 대상 브라우저에서 작동하지 않을 수있는 css3 기능입니다. 상호 운용성을 확인할 수 있습니다 ( caniuse.com의 fe ).

Web_Designer의 답변에 추가하기 위해 <div>는 높이를 포함하는 요소 의 너비의 75 %의 높이 (하단 패딩으로 구성)를 갖습니다 . 다음은 좋은 요약입니다 : http://mattsnider.com/css-using-percent-for-margin-and-padding/ . 왜 이것이 그렇게되어야할지 모르겠지만, 그것이 그 방법입니다.

div가 100 % 이외의 너비가되도록하려면 너비를 설정할 다른 줄 바꿈 div가 필요합니다.

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

최근 Elliot의 이미지 트릭과 비슷한 것을 사용하여 CSS 미디어 쿼리를 사용하여 장치 해상도에 따라 다른 로고 파일을 제공 할 수 있었지만 <img>자연스럽게 하는 것처럼 비례 적으로 확장 됩니다 (배경 이미지를 투명 .png로 설정했습니다) 올바른 종횡비로). 그러나 Web_Designer의 솔루션은 http 요청을 저장합니다.

여기 w3schools.com에 언급되어 있으며이 허용되는 답변 에서 다소 반복하여 패딩 값을 백분율로 표시합니다 (강조 광산).

포함 요소 너비의 백분율로 패딩을 지정합니다.

16 : 9 종횡비를 유지하는 반응 형 DIV의 올바른 예인 Ergo는 다음과 같습니다.

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

JSFiddle 데모

@ web-tiki는 이미 vh/ 을 사용하는 방법을 보여 주므로 vw화면 중앙에 놓는 방법이 필요합니다 .9시 16 분 세로에 대한 스 니펫 코드는 다음과 같습니다 .

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY이 중심을 화면에 유지합니다. calc(100vw * 16 / 9)9/16의 예상 높이입니다. (100vw * 16 / 9 - 100vh)오버플로 높이이므로 풀업 overflow height/2하면 화면 중앙에 유지됩니다.

가로 및 16 : 9을 유지 하려면 사용을 보여줍니다.

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

9/16 비율은 변경하기 쉽고 사전 정의 할 필요가 없습니다 . 100:56.25또는 100:75먼저 높이를 유지하려면 너비와 높이를 전환해야합니다 (예 : height:100vh;width: calc(100vh * 9 / 16)9:16 세로).

다른 화면 크기에 맞게 조정하려면 관심을 가질 수도 있습니다.

• 배경 크기 덮개 / 포함
  • 위 스타일은 포함하는 것과 비슷하며 너비 : 높이 비율에 따라 다릅니다.
• 객체 적합
  • img / video 태그 용 커버 / 포함
• @media (orientation: portrait)/@media (orientation: landscape)
  • 비율을 변경하기 위한 portrait/ landscape에 대한 미디어 쿼리 .

이것은 받아 들인 대답에 대한 개선 사항입니다.

• 래퍼 div 대신 의사 요소를 사용합니다.
• 종횡비는 부모 대신 상자의 너비를 기준으로합니다.
• 내용물이 커지면 상자가 세로로 늘어납니다.

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

나는 우연히 스마트 솔루션을 사용 <svg>하고 display:grid.

그리드 요소를 사용하면 높이를 설정하는 요소를 지정하지 않고도 두 개 이상의 요소로 동일한 공간을 차지할 수 있습니다. 즉, 상자 에서 키가 클수록 비율이 설정 됩니다.

즉, 컨텐츠가 전체 "비율"을 채울만큼 키가 크지 않으며 단순히이 공간에 컨텐츠를 배치 할 수있는 방법을 찾고있을 때만 (즉, 양방향으로 사용하도록) 사용할 수 있습니다. display:flex; align-items:center; justify-content:center).
그것은 꽤 많이 투명을 사용하는 것과 동일합니다 <img>으로 display:block(가)를 제외하고, 소정의 비율로 <svg>가볍고 수정하는 것이 훨씬 더 쉽다 (당신이 필요합니다, 이에 응답 비율을 변경).

<div class="ratio">
  <svg viewBox="0 0 1 1"></svg>
  <div>
    I'm square
  </div>
</div>

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

<svg>s 비율을 변경하기 만하면됩니다.

• <svg viewBox="0 0 4 3"></svg>
• <svg viewBox="0 0 16 9"></svg>

작동 확인 :

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

/* below code NOT needed for setting the ratio 
 * I just wanted to mark it visually
 * and center contents
 */
.ratio div {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    Fixed ratio 7:1
  </div>
</div>

컨텐츠 요소가 더 높을 때 비율을 설정할 수없는 솔루션이 필요한 경우 (오버플로 숨김 또는 자동으로) position:relative그리드와 position:absolute; height:100%; overflow-y: auto;컨텐츠에서 설정해야 합니다. 예:

.ratio {
  display: grid;
  position: relative;
}
.ratio > * {
  grid-area: 1/1/1/1;
}


.ratio > div {
  height: 100%;
  overflow-y: auto;
  position: absolute;
  
  /* the rest is not needed */
  border: 1px solid red;
  padding: 0 1rem;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.

<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.

<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
  </div>
</div>

귀하의 솔루션을 바탕으로 몇 가지 트릭을 만들었습니다.

사용하면 HTML 만

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

이 방법으로 사용하려면 다음을 수행하십시오. CSS :

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

그리고 js (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

그리고 이것을 사용하면 attr data-keep-ratio을 높이 / 너비로 설정 하면됩니다.

svg를 사용할 수 있습니다. 컨테이너 / 래퍼 위치를 상대적으로 만들고 svg를 정적으로 배치 한 다음 절대적으로 배치 된 내용을 넣습니다 (상단 : 0; 왼쪽 : 0; 오른쪽 : 0; 하단 : 0;)

16 : 9 비율의 예 :

image.svg : (src로 인라인 가능)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS :

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML :

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

인라인 svg가 작동하지 않는 것처럼 보이지만 svg를 urlencode하고 다음과 같이 img src 속성에 포함시킬 수 있습니다.

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

내 경우에는 SCSS가 최고의 솔루션입니다. 데이터 속성 사용 :

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

예를 들면 다음과 같습니다.

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

출처

대부분의 답변은 매우 멋지지만 대부분은 이미 올바른 크기의 이미지가 필요합니다 ... 다른 솔루션은 너비에 대해서만 작동하고 사용 가능한 높이는 신경 쓰지 않지만 때로는 특정 높이에 내용을 맞추고 싶습니다 .

완벽하게 이식 가능하고 크기 조정이 가능한 솔루션을 제공하기 위해 이들을 결합하려고 시도했습니다 ... 트릭은 이미지의 자동 크기 조정에 사용하지만 미리 렌더링 된 이미지 또는 두 번째 HTTP 요청 ...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}

<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

SVG의 너비 및 높이 속성에 큰 값을 사용했습니다. 이는 축소 할 수 있기 때문에 최대 예상 크기보다 커야하기 때문입니다. 이 예에서는 div의 비율을 10 : 5로 만듭니다.

단지 아이디어 나 해킹.

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}

<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

외부 div가 컨테이너이고 내부가 비율을 유지 해야하는 요소 (img 또는 youtube iframe 또는 기타)가 2 div라고 가정 해 보겠습니다.

html은 다음과 같습니다

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

"요소"의 비율을 유지해야한다고 말할 수 있습니다

비율 => 4 대 1 또는 2 대 1 ...

CSS는 다음과 같습니다

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

패딩은 %로 지정 될 때 높이가 아닌 너비를 기준으로 계산됩니다. .. 기본적으로 너비를 높이는 항상 너비에 따라 계산됩니다. 비율을 유지합니다.

세로 또는 가로보기에서 뷰포트 내부에 사각형을 맞추려면 (가능한 한 크지 만 바깥쪽에 붙어 있지는 않음) vw/ vhon orientation portrait/ landscape:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

img특정 종횡비를 채우는 태그 가있는 솔루션을 공유하고 싶습니다 . backgroundCMS에 대한 지원이 부족하여 사용할 수 없었으며 다음과 같은 스타일 태그를 사용하고 싶지 않습니다 <img style="background:url(...)" />. 또한 너비는 100 %이므로 일부 솔루션 에서처럼 고정 크기로 설정할 필요가 없습니다. 반응 적으로 확장됩니다!

.wrapper {
  width: 50%;
}

.image-container {
  position: relative;
  width: 100%;
}

.image-container::before {
  content: "";
  display: block;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4-3::before {
  padding-top: 75%;
}

.ratio-3-1::before {
  padding-top: calc(100% / 3);
}

.ratio-2-1::before {
  padding-top: 50%;
}

<div class="wrapper"> <!-- Just to make things a bit smaller -->
  <p>
  Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
  </p>
  <div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
    <img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
  </div>
  <p>
  Just place other block elements around it; it will work just fine.
  </p>
</div>

나는이 문제에 꽤 오랫동안 부딪 쳤으므로 JS 솔루션을 만들었습니다. 기본적으로 요소의 너비에 따라 domElement의 높이를 지정한 비율로 조정합니다. 다음과 같이 사용할 수 있습니다.

<div ratio="4x3"></div>

요소의 높이를 설정하기 때문에 요소는 a display:block또는 이어야합니다 display:inline-block.

https://github.com/JeffreyArts/html-ratio-component

SVG를 사용하여이를 달성 할 수 있습니다.

경우에 따라 다르지만 일부 경우에는 실제로 유용합니다. 예로서 -는 설정할 수 background-image고정 높이를 설정하지 않고 삽입 또는 무비에 사용 <iframe>비율 16:9과 position:absolute등

위해 3:2설정 한 비율 viewBox="0 0 3 2"과에 이렇게.

예:

div{
    background-color:red
}
svg{
    width:100%;
    display:block;
    visibility:hidden
}

.demo-1{width:35%}
.demo-2{width:20%}

<div class="demo-1">
  <svg viewBox="0 0 3 2"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 3 2"></svg>
</div>

너비 : 100px 및 높이 : 50px (예 : 2 : 1)를 유지한다고 가정하면 다음과 같이하십시오.

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}

플럭스 레이아웃 (FWD)을 사용할 수 있습니다.

https://en.wikipedia.org/wiki/Adaptive_web_design

레이아웃을 확장하고 유지 관리하는 것은 약간 복잡하지만 (RWD)와 같은 내용을 푸시하지 않고도 페이지 크기를 조정할 수 있습니다.

반응 형처럼 보이지만 크기가 조정됩니다. https://www.youtube.com/watch?v=xRcBMLI4jbg

CSS 스케일링 공식은 다음에서 찾을 수 있습니다.

http://plugnedit.com/pnew/928-2/

canvas 요소를 사용하여 종횡비를 유지하는 간단한 방법입니다.

아래 div 크기를 조정하여 실제로 사용하십시오.

나 에게이 방법이 가장 효과적이므로 다른 사람들과 공유하여 혜택을 얻을 수 있습니다.

.cont {
  border: 5px solid blue;
  position: relative;
  width: 300px;
  padding: 0;
  margin: 5px;
  resize: horizontal;
  overflow: hidden;
}

.ratio {
  width: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

동적 높이로도 작동합니다!

.cont {
  border: 5px solid blue;
  position: relative;
  height: 170px;
  padding: 0;
  margin: 5px;
  resize: vertical;
  overflow: hidden;
  display: inline-block; /* so the div doesn't automatically expand to max width */
}

.ratio {
  height: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

나는 새로운 해결책을 사용했다.

.squares{
  width: 30vw
  height: 30vw

주요 종횡비로

.aspect-ratio
  width: 10vw
  height: 10vh

그러나 이것은 전체 뷰포트와 관련이 있습니다. 따라서 뷰포트 너비의 30 % 인 div가 필요한 경우 대신 30vw를 사용할 수 있으며 너비를 알고 있으므로 calc 및 vw 단위를 사용하여 높이에서 재사용 할 수 있습니다.

글쎄, 우리는 최근 aspect-ratioCSS 에서 속성 을 사용할 수있는 능력을 얻었습니다 .

https://twitter.com/Una/status/1260980901934137345/photo/1

참고 : 지원은 아직 최고가 아닙니다 ...

https://caniuse.com/#search=aspect-ratio

전체 컨테이너 구조가 백분율을 기반으로 한 경우 이것이 기본 동작 일 수 있습니다.보다 구체적인 예를 제공 할 수 있습니까?

아래는 전체 상위 계층 구조가 %를 기반으로 한 경우 추가 js / css없이 브라우저 창 조정이 작동한다는 것을 의미하는 예입니다. 이는 레이아웃에서 가능하지 않습니까?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>