[JQUERY] 동적 높이 폭 (CSS 레이아웃 유체) 중복]이면

동적 높이 폭 (CSS 레이아웃 유체) 중복]이면

해결법

1. ---

   1.jQuery를 사용하면 수행하여이를 달성 할 수

   jQuery를 사용하면 수행하여이를 달성 할 수

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

2. ---

   2.[업데이트 : 내가 독립적으로, 내가부터 배운이 트릭을 발견하지만 티에리 Koblentz는 나를 이길. 당신은 떨어져 목록에 자신의 2009 기사를 찾을 수 있습니다. 신용이 때문이다 신용.]

   [업데이트 : 내가 독립적으로, 내가부터 배운이 트릭을 발견하지만 티에리 Koblentz는 나를 이길. 당신은 떨어져 목록에 자신의 2009 기사를 찾을 수 있습니다. 신용이 때문이다 신용.]

   나는이 오래된 질문 알아요,하지만 난 단지 CSS로 해결 않았다 비슷한 문제가 발생했습니다. 여기에 솔루션에 대해 설명 내 블로그 게시물입니다. 포스트에 포함하는 것은 살아있는 예입니다. 코드는 다음과 재 게시됩니다.

   #container { 표시 : 인라인 블록; 위치 : 상대; 폭 : 50 %; } #가짜의 { 마진 - 최고 : 75 %; / * 4 : 3 종횡비 * / } #element { 위치 : 절대; 최고 : 0; 바닥 : 0; 왼쪽 : 0; 오른쪽 : 0; 배경 색상 : 실버 / * 나를 보여! * / }

   텍스트

3. ---

   3.CSS를 사용하는 방법이있다!

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

   당신이 부모 컨테이너에 따라 귀하의 폭을 설정하는 경우에는 현재의 폭에 따라 계산됩니다 비율을 0 설정 패딩 - 하단까지의 높이를 설정할 수 있습니다 :

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

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

4. ---

   4.그것은 어떤 자바 스크립트없이 가능하다 :

   그것은 어떤 자바 스크립트없이 가능하다 :

   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%;
   }
   

5. ---

   5.간단하고 NEET : 대답하는 높이 사용 폭스 바겐 단위 / 뷰포트의 폭에 따라 폭입니다.

   간단하고 NEET : 대답하는 높이 사용 폭스 바겐 단위 / 뷰포트의 폭에 따라 폭입니다.

   데모

   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
   

   이 기술은 당신이 할 수 있습니다 :

   이 단위는 추가 정보를 원하시면 canIuse를 참조 IE9 +에서 지원하는

6. ---

   6.HTML

   HTML

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

   CSS

   #container {
       width: 50%; /* desired width */
   }
   
   #element {
       height: 0;
       padding-bottom: 100%;
   }
   

7. ---

   7.패딩 상위 / 하위 기술에 확장, 상기 요소의 높이를 설정하는 의사 소자를 사용할 수있다. 사용 플로트과 부정 마진 흐름과보기에서 의사 요소를 제거합니다.

   패딩 상위 / 하위 기술에 확장, 상기 요소의 높이를 설정하는 의사 소자를 사용할 수있다. 사용 플로트과 부정 마진 흐름과보기에서 의사 요소를 제거합니다.

   이것은 당신이 여분의 사업부 및 / 또는 CSS 포지셔닝을 사용하지 않고 상자 안에 내용을 배치 할 수 있습니다.

   .fixed-AR : 전에 { 내용 : ""; 왼쪽으로 뜨다; 폭 : 1 픽셀; 마진 왼쪽 : -1px; } .fixed-AR : 후 { 내용 : ""; 표시 : 테이블; 취소 : 둘 다; } / * 비율 * / .fixed-AR-1-1 :: 전에 { 패딩 탑 : 100 %; } .fixed-AR-4-3 :: 전에 { 패딩 탑 : 75 %; } .fixed-AR-16-9 :: 전에 { 패딩 탑 : 56.25 % } / * 데모 * / .fixed-AR { 마진 : 1em 0; 최대 폭 : 400 픽셀; 배경 : #EEE의 URL (https://lorempixel.com/800/450/food/5/) 센터 노 - 반복; 배경 크기 : 포함; }

   1 : 1 종횡비

   4 : 3 비율

   16 : 9 화면 비율

8. ---

   8.정말이 나단의 대답에 주석으로 속하지만 난 아직 그렇게 할 수 있지 않다 ... 나는 상자에 맞게 너무 많은 물건이 있더라도, 가로 세로 비율을 유지하고 싶었다. 그의 예는 종횡비를 바꾸는 높이를 확장한다. 나는 추가 발견

   정말이 나단의 대답에 주석으로 속하지만 난 아직 그렇게 할 수 있지 않다 ... 나는 상자에 맞게 너무 많은 물건이 있더라도, 가로 세로 비율을 유지하고 싶었다. 그의 예는 종횡비를 바꾸는 높이를 확장한다. 나는 추가 발견

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

   .element에 도움을 주었다. http://jsfiddle.net/B8FU8/3111/ 참조

9. ---

   9.폭 : 80vmin; 높이 : 80vmin;

   폭 : 80vmin; 높이 : 80vmin;

   CSS 작은 뷰, 높이 또는 너비의 80 %를 수행

   http://caniuse.com/#feat=viewport-units

from https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout by cc-by-sa and MIT license