CSS의 div의 종횡비 유지 전용

Question

div (#) 프레임과 같은 요소가있는 경우 지정된 종횡비 (예 : 16 : 9), 어떤 스타일을 적용해야합니까? Javascript에는 여러 가지 솔루션이 있지만, CSS 만 사용하는 방식을 시도하고 싶습니다.

나는 이미 검색 한 적이 있지만 이미 some solutions in CSS이 있지만 너비 값에 의해 계산 된 비율 채우기를 사용합니다. 즉 가로 세로 비율은 브라우저가 가로로 조정될 때만 유지되고 그렇지 않은 경우에만 유지됩니다. 세로 크기 조정.

#frame 
{ 
    /* centered */ 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    margin: auto; 
    position: fixed; 

    /* aspect ratio */ 
    width: 100%; 
    height: 0px; 
    padding-bottom: 56.25%; 
} 

이 충분 작동하지만, 나는 아래에 삽입 한 이미지에서 볼 수 있듯이, 수평 및 수직 크기를 조정할 때 여전히 요소의 가로 세로 비율을 유지하는 솔루션을 원한다.

Answer 1

나는 그들이 사용되기 위하여 의미 된대로 CSS 속성을 사용하여 높이에 따라 요소의 너비를 설정할 수 있습니다 생각하지 않습니다. 그래서 JS를 고려해보십시오.) 이미지가 포함 된 해킹이 있지만 큰 것은 아닙니다. 어쩌면 당신은 아이디어를 확장 할 수 있습니다 (나는 여전히 JS를 선호합니다).

프레임을 표시 할 최대 크기의 이미지가 필요합니다. 투명한 gif는해야합니다. 그런 다음 래퍼에서 inline-block을 사용하여 이미지의 기본 동작이 래퍼 크기를 설정하게합니다.

<div class="wrapper"> 
    <img src="https://cdn.boldernet.net/0/0/856/856567-450.jpg"> 
    <div class="content"> 
     content 
    </div> 
</div> 

CSS :

body { 
    text-align: center; 
} 

.wrapper > img { 
    display:block; 
    max-width: 100%; 
    max-height: 100%; 
} 
.wrapper { 
    display: inline-block; 
    position: relative; 
    top: 50%; 
} 
.content { 
    position: absolute; 
    background: blue; 
    left: 0; 
    top: -50%; 
    width:100%; 
    height:100%; 
} 

그럼 당신은 귀하의 콘텐츠를 개최 래퍼 내부에 절대 위치 요소를 사용