Safari에서 CSS로 종횡비 강제 적용이 작동하지 않습니다.

Question

다음 코드는 Firefox와 Chrome에서는 잘 작동하지만 (Mac 및 iPad에서 테스트 됨) : http://jsfiddle.net/eFd87/에서는 에 없습니다.

<div id="wrapper"> 
    <div id="content"> 
     <img src="http://farm3.staticflickr.com/2783/4106818782_cc6610db2c.jpg">   
    </div> 
</div> 

#wrapper { 
    position: relative; 
    padding-bottom: 33.33%; /* Set ratio here */ 
    height: 0; 
} 
#content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: green; 
    text-align: center; 
} 
#content img { 
    max-height: 100%; 
}​ 

목표는 래퍼 DIV (이것은 회전 목마 내 웹 응용 프로그램에서 ) 고정 종횡비를 유지하는 것입니다, 그리고 그 안에 이미지 사업부 (및 센터)에 맞게 크기를 조정합니다.

Safari에서는 height: 0 (이미지 높이가 0입니다) 때문에 이미지가 표시되지 않습니다. height: 100%으로 이미지가 표시되지만 div에 맞지 않습니다 (오버플로).

이 문제는 어떤 해결책이 있습니까? 나는 이것을 몇 시간 동안 해왔다. ...

Answer 1

이것은 정확하게 당신의 질문에 대한 훌륭한 대답은 아니지만 답변이다.

내가 알고있는 한 (나는이 문제를 해결할 수있어서 기쁩니다) 다른 CSS 속성을 기반으로 계산을 수행 할 방법이 없으므로 CSS 만 사용하는 것이 가능하다는 것을 매우 의문 스럽습니다. . 따라서 예를 들어 width: height * 1.3;을 사용할 수 없습니다. %를 사용할 수 없습니다. 그 이유는 그것이 자기 자신이 아니라 부모의 비율이기 때문입니다.

아래쪽 패딩과 관련된 방식은 안정적으로 작동하지 않지만 화면에서 작동하지만 다른 화면 비율이 다른 경우 나 툴바의 가로 세로 비율을 변경하는 도구 모음이 많은 경우 브라우저 창을 열면 가로 세로 비율이 잘못됩니다. 당신이 정말로 사용할 수없는 크기를 보장 할 수 없다면 부모의 %입니다.

지금까지 내가 말할 수있는 유일한 옵션은 자바 스크립트입니다. 가장 분명하고 권장할만한 것은 jQuery 나 너비를 기반으로 높이를 명시 적으로 설정하는 다른 프레임 워크가 될 것입니다. 브라우저 창 크기 조정을 수신 대기하는 것을 잊지 마십시오.

Answer 2

너비가 100 %이고 높이가 Safari에서 자동으로 작동됩니다. 처음에는 FF로 잘 작동하지만 Safari에서는 실패한 w와 h 모두 100 %를 사용했습니다.

.stretch { 
    width: 100%; 
    height: auto; 
} 

HTML :

<div> 
    <img src="images/someimg.jpg" class="stretch" alt="" /> 
</div> 

그리고 오, 내가 사용했습니다 부트 스트랩 모든 요소에이 추가됩니다.

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
}