동적 폭과 동일한 높이(CSS 유체 레이아웃)

동적 폭과 동일한 높이(CSS 유체 레이아웃)

이 질문에는 이미 답변이 있습니다.

CSS를 사용하여 div의 애스펙트비를 유지합니다. (37 회답)

닫힘7년 전.

폭과 같은 높이(비율 1:1)를 설정할 수 있습니까?

예

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

[갱신:비록 내가 독립적으로 이 기술을 발견했지만, 그 이후로 티에리 코블렌츠가 나를 앞섰다는 것을 알게 되었다.그의 2009년 기사는 A List Apart에서 찾을 수 있다.신용이 있어야 할 곳에 신용이 있습니다.

오래된 질문인 것은 알지만, CSS만으로 해결한 것과 같은 문제가 발생했습니다.다음은 솔루션에 대해 논의한 제 블로그 게시물입니다.이 포스트에는 실제 예가 포함되어 있습니다.코드는, 다음에 재포스팅 됩니다.

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

CSS를 사용하는 방법이 있습니다!

부모 컨테이너에 따라 폭을 설정하는 경우 높이를 0으로 설정하고 패딩 하단을 현재 폭에 따라 계산되는 백분율로 설정할 수 있습니다.

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

이것은 모든 주요 브라우저에서 잘 작동합니다.

JSFiddle:https://jsfiddle.net/ayb9nzj3/

Javascript 없이도 가능합니다. : )

HTML:

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div> 

CSS:

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

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

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}

: " " " " " " " :aspect-ratio

div {
  aspect-ratio : 1 / 1;
  width:50%;
  border:1px solid red;
}

<div>Aspect ratio : 1 / 1</div>

---

기타 방법: 사용vw뷰포트 폭에 따른 응답 높이/폭 단위.

vw : 뷰포트 폭의 100분의 1 (소스 MDN)

데모

HTML:

<div></div>

1:1 애스펙트비의 CSS:

div{
    width:80vw;
    height:80vw; /* same as width */
}

---

원하는 석면비 및 요소의 폭에 따라 높이를 계산하는 표입니다.

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

---

이 기술을 통해 다음 작업을 수행할 수 있습니다.

• 를 사용하지 않고 합니다.position:absolute;
• 불필요한 HTML 마크업 없음 (하나의 요소만)
• vh 단위를 사용하여 뷰포트의 높이에 따라 요소비를 조정합니다.
• 뷰포트의 높이와 폭에 따라 항상 뷰포트에 맞는 응답 정사각형 또는 기타 가로 세로 비율을 만들 수 있습니다(이 답변 참조: 뷰포트의 폭과 높이에 따른 응답 정사각형 또는 이 데모).

이러한 유닛은 IE9+에서 지원되며 자세한 내용은 canIuse를 참조하십시오.

jQuery를 사용하면 다음과 같이 할 수 있습니다.

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

http://jsfiddle.net/n6DAu/1/ 에서 작업 예를 확인합니다.

매우 간단한 방법 jsfiddle

HTML

<div id="container">
    <div id="element">
        some text
    </div>
</div>

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}

패딩 상단/하단 기술을 확장하면 유사 요소를 사용하여 요소의 높이를 설정할 수 있습니다.플로우 및 뷰에서 유사 요소를 제거하려면 플로우 및 음의 여백을 사용합니다.

이를 통해 별도의 div 및/또는 CSS 포지셔닝을 사용하지 않고 상자 안에 콘텐츠를 배치할 수 있습니다.

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


/* proportions */

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


/* demo */

.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;
  background-size: contain;
}

<div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>

이건 네이쓴의 대답에 대한 코멘트인데, 아직 그렇게 할 수 없어요...
상자에 들어가는 물건이 많아도 가로 세로 비율을 유지하고 싶었습니다.그의 예에서는 높이를 확장하여 가로 세로 비율을 변경합니다.는 덧셈을 했다.

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

도와달라고 부탁했어요http://jsfiddle.net/B8FU8/3111/ 를 참조해 주세요.

폭: 80vmin, 높이: 80vmin;

최소 표시, 높이 또는 폭의 80%를 CSS가 처리

http://caniuse.com/ #viewport-filengthttp://http://caniuse.com/

언급URL : https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout