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

Program / 글쓴이

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

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

CSS :

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

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

답변

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

CSS :

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

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

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

답변

이를 수행하는 또 다른 좋은 방법은 설정된 종횡비로 투명 이미지를 사용하는 것입니다. 그런 다음 이미지의 너비를 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;
}

답변

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

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

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

깡깡이

답변

둘러싸는 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/

답변

이 대답은 많은 클래스 이름을 사용하지 않는 것을 선호하는 것을 제외하고는 다른 대답과 거의 동일합니다. 그러나 그것은 단지 개인적인 취향입니다. 중첩 된 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%; }

답변

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

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

답변

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