CSS를 사용하여 div의 높이를 너비에 비례하여 조정할 수 있습니까?

Question 1

내 div 높이가 항상 너비의 절반이되도록 CSS에서 변수를 설정할 수 있습니까?

<div class="ss"></div>

CSS :

.ss {
    width:30%;
    height: half of the width;
}

이 30 % 너비는 화면 해상도에 따라 조정됩니다.

Question 2

상대 패딩 (높이 측면에서도)은 상위 요소의 너비를 기반으로하기 때문에 상위 항목에 패딩을 사용하여이를 수행 할 수 있습니다.

CSS :

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

이것은이 기사를 기반으로합니다 : CSS 만 사용하는 반응 형 상자의 비례 적 크기 조정

Question 3

이를 수행하는 또 다른 좋은 방법은 설정된 종횡비로 투명 이미지를 사용하는 것입니다. 그런 다음 이미지의 너비를 100 %로 설정하고 높이를 자동으로 설정합니다. 안타깝게도 컨테이너의 원본 콘텐츠가 아래로 내려갑니다. 따라서 원본 콘텐츠를 다른 div에 래핑하고 상위 div의 맨 위에 절대적으로 배치해야합니다.

<div class="parent">
   <img class="aspect-ratio" src="images/aspect-ratio.png" />
   <div class="content">Content</div>
</div>

CSS

.parent {
  position: relative;
}
.aspect-ratio {
  width: 100%;
  height: auto;
}
.content {
  position: absolute;
  width: 100%;
  top: 0; left: 0;
}

Question 4

"너비"에 대해보기 너비를 사용하고 "높이"에 대해보기 너비의 절반을 다시 사용할 수 있습니다. 이런 식으로 뷰포트 크기에 관계없이 정확한 비율을 보장합니다.

<div class="ss"></div>

.ss
{
    width: 30vw;
    height: 15vw;
}

깡깡이

Question 5

둘러싸는 div의 픽셀 단위로 설정된 너비에 비례하는 수직 크기 조정을 원하면 다음과 같이 추가 요소가 필요하다고 생각합니다.

#html

<div class="ptest">
    <div class="ptest-wrap">
        <div class="ptest-inner">
            Put content here
        </div>
    </div>
</div>

#css
.ptest {
  width: 200px;
  position: relative;
}

.ptest-wrap {
    padding-top: 60%;
}
.ptest-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #333;
}

작동하지 않는 2div 솔루션은 다음과 같습니다. 60 % 세로 패딩은 너비가 아니라 창 너비에 비례합니다 div.ptest.

http://jsfiddle.net/d85FM/

다음은 작동하는 위 코드의 예입니다.

http://jsfiddle.net/mmq29/

Question 6

이 대답은 많은 클래스 이름을 사용하지 않는 것을 선호하는 것을 제외하고는 다른 대답과 거의 동일합니다. 그러나 그것은 단지 개인적인 취향입니다. 중첩 된 div의 목적을 미리 선언하므로 각 div에 클래스 이름을 사용하는 것이 더 투명하다고 주장 할 수 있습니다.

<div id="MyDiv" class="proportional">
  <div>
    <div>
      <p>Content</p>
    </div>
  </div>
</div>

다음은 일반적인 CSS입니다.

.proportional { position:relative; }
.proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }

그런 다음 첫 번째 내부 div를 대상으로 너비와 높이를 설정합니다 (상단 패딩).

#MyDiv > div { width:200px; padding-top:50%; }

Question 7

확장 가능한 솔루션을 찾는 사람 : SASS에 작은 도우미 유틸리티를 작성하여 서로 다른 중단 점에 대해 반응 형 비례 사각형을 생성했습니다. SASS 비율 살펴보기

누구에게나 도움이되기를 바랍니다!

Question 8

보기 너비를 사용하여 높이를 설정할 수 있습니다. 100 vw는 너비의 100 %입니다. height: 60vw;높이가 너비의 60 %가됩니다.

Question 9

한 가지 방법은 이미지 작업시 유용하지만 그렇지 않은 경우 해결 방법으로 사용할 수 있습니다.

<html>
<head>
</head>
<style>
    #someContainer {
        width:50%;
        position: relative;
    }
    #par {
        width: 100%;
        background-color:red;
    }
    #image {
        width: 100%;
        visibility: hidden;
    }
    #myContent {
        position:absolute;
    }
</style>
<div id="someContainer">
    <div id="par">
        <div id="myContent">
            <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>    
        </div>
        <img src="yourImage" id="image"/>
    </div>
</div>
</html>

사용하려면 yourImage를 이미지 URL로 바꾸십시오. 원하는 가로 / 세로 비율로 이미지를 사용합니다.

div id = "myContent"는 myContent가 이미지 위에 오버레이되는 해결 방법의 예입니다.

이것은 다음과 같이 작동합니다. 부모 div는 이미지의 높이를 채택하고 이미지 높이는 부모의 너비를 채택합니다. 그러나 이미지는 숨겨져 있습니다.

Question 10

vw또는을 사용하여 요소의 너비와 높이를 모두 할당 할 수 있습니다 vh. 예를 들면 :

#anyElement {
    width: 20vh;
    height: 20vh;
}

이렇게하면 가로 세로 비율을 유지하면서 너비와 높이를 브라우저 현재 높이의 20 %로 설정합니다. 그러나 이것은 뷰포트 치수에 비례하여 배율을 조정하려는 경우에만 작동합니다.