CSS : 폭

Question

내 질문에 사업부의 높이 기준을 유지하는이 질문에 매우 유사하다 : CSS: 100% width or height while keeping aspect ratio?

나는 위치가 고정되어 사업부가 있습니다. div의 너비은 100 %이어야하고 높이는 정확히 너비는의 1/6이어야합니다. -webkit-calc()이 방법이 있습니까?

참고 : 줌/방향 변경이 너비/높이에 영향을 줄 수 있으므로 JS 해결책이 바람직하지 않습니다.

Answer 1

에 대한 코멘트에서 두 번째 제안이 당신이 후에 무엇인가를 이동? 나는 -webkit-calc()을 전혀 사용하지 않고있다. 이미지로 1px을 삽입하고 position: fixed이 적용된 div에 이미지를 입력하고 width이 100% 및 position: relative 인 이미지로 설정합니다. 그렇다면 나는 내면을 추가했습니다. 이는 그 조상만큼 높고 넓어 지도록 절대적으로 배치 된 내부 div을 추가했습니다.

은 이제 외부 div의 폭을 변경할 수 있으며, 이미지 'width: 100% 설정을 확인합니다 모두 외부와 내부 div'(들 항상 폭의 1/6와 같은 높이가 보장됩니다 또는 적어도 정확히 정확히 같은 높이에 가깝게, 높이는 픽셀의 가장 가까운 전체 수로 반올림됩니다. 모든 콘텐츠는 내면 div 내부로 들어갈 수 있습니다.

HTML

<div> 
    <div></div> 
    <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" /> 
</div> 

CSS

html, body { 
    margin: 0px; 
    padding: 0px; 
} 
div { 
    position: fixed; 
    width: 100%; 
} 
div > div { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px;  
} 
img { 
    width: 100%; 
    display: block;  
    position: relative; 
} 

여기에 요청 된 동작을 보여주는 jsFiddle입니다.

Answer 2

당신은 항상 DIV 폭과 같이 설정할 수 있습니다

$('#div1').css("width", $('#div1').height()/6); 

편집 :

또는이 같은 것을 사용할 수 있습니다

/* Firefox */ 
width: -moz-calc(100%/6); 
/* WebKit */ 
width: -webkit-calc(100%/6); 
/* Opera */ 
width: -o-calc(100%/6); 
/* Standard */ 
width: calc(100%/6); 

이것은 단지 예입니다 - ..하지만 css 파일의 픽셀에서 div의 높이를 구하는 것은 불가능합니다. jquery를 사용해야합니다.

EDI T :

$('#div1').css("height", window.width()/6); 

Answer 3

당신이 jQuery를 사용할 수있는 폭의

높이 1/6, 예를 들어,

$('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width()/6); 가독성

$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);}); 

Answer 4

Responsive square columns에 설명 된 해결책을 사용할 수도 있습니다.

부모 요소의 너비에 따라 % padding-top/bottom 및 margin-top/bottom이 계산된다는 사실을 기반으로합니다.

은 다음과 같을 것입니다 상황에 적응 :

FIDDLE

HTML :

<div class="wrap"> 
    <div class="content"> 
    </div> 
</div> 

CSS : 솔루션에 대한

.wrap{ 
    position:fixed; 
    width:100%; 
    padding-bottom:16.666%; /* 100x1/6 = 16.666...*/ 
} 
.content{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}