CSS 크기 조정 div 비례 적으로 이미지 크기 조정

CSS를 사용하여 div (또는 다른 요소)의 너비 (또는 다른 방향)에 대한 높이의 크기를 조정할 수 있습니까? 기본적으로 브라우저 윈도우의 크기가 조정됨에 따라 백분율 너비가 비례 적으로 조정되는 방식으로 동작하게하려면 어떻게해야합니까?CSS 크기 조정 div 비례 적으로 이미지 크기 조정

출처

2012-01-19 jFrymann

측정 단위로 ems를 사용해 볼 수 있습니다. 아래의 Oscar 솔루션과 결합하면 부모 크기를 픽셀 단위로 정의/조정하고 비례 결과를 얻을 수 있습니다. –

this 관련 질문을보십시오. 한마디로 : 아니, 당신이 .parent 요소에 너비 또는 높이 기준을 설정하려는 경우에만 CSS

출처

2012-01-19 08:42:14 Wesley

감사합니다 @ 웨슬리, 그 말이, 크로스 브라우저 IE 표현 유형 솔루션 이상적 이었지만 불가능합니다. 브라우저가 이미지의 크기를 조정하는 방식 (및 임베드, 객체, 비디오 태그)에 대해 궁금한 점이 있습니다. 그러한 경우에 특별한 것은 무엇이며 div가 동일한 동작을 에뮬레이션하도록 할 수 있습니까? – jFrymann

div는 실제로 arent 이미지이며 브라우저는이를 다르게 처리합니다. 행동을 모방 할 수는 있지만 CSS에서는 모방 할 수는 없습니다. 자바 스크립트를 사용하면 그리 어렵지 않습니다. – Wesley

를 사용 불가능하고 유지해야하는 비율을 알고, 당신은 같은 것을 할 수 있습니다

.parent{ 
    width: 150px; 
} 
.child{ 
    width: 100%; 
    padding-top: 50%; /* outer height will be 75px (150px*0.5) */ 
}

높이 (또는 너비)가 0이고 패딩 만 기준으로 정의하는 것에 의존한다는 점에 유의하십시오. 따라서 콘텐츠를 추가하려는 경우 .child 내의 절대 위치 div 내에 랩핑해야합니다. 예를 들어 this fiddle을 참조하십시오.

출처

2014-03-14 18:21:36 Oscar

CSS 크기 조정 div 비례 적으로 이미지 크기 조정

답변

관련 문제