JavaScript없이 요소 비율을 유지하는 방법

Question

HTML 페이지의 일부 항목 크기를 창의 크기에 맞게 조정하려고합니다. 내가 CSS와 함께 할 수있는 방법을 찾고 있어요 그러나

$(window).resize(function(){ 
    var width = $(this).width(); 
    $(item).css('height',(height * w/h)+ 'px'); // w and h are variables used to calculate the ratio 
}); 

: 나는 같은과 함께 아주 쉽게 JQuery와 함께 할 수있는 알고있다. 필자는 창의 너비의 40 %를 차지하는 가운데 맞춤 항목이 있습니다. 따라서 창의 너비가 줄어들면 항목의 너비도 줄어들지 만 높이는 동일합니다. 그래서 제가 원하는 것은 그 비율이 동일하다는 것입니다.

Answer 1

높이를 0으로 설정 한 다음 패딩 하단을 추가 할 수 있습니다. X % 여기서 X는 이미지의 종횡비입니다. 이 배경 이미지와 함께 사용될 수있는 또

.element{ padding-bottom: percentage(height/width); } 

를 이용하여 배경 사이즈를 이용하여 SASS와 비율을 얻을 수있다 : 커버; 이미지를 반응 적으로 만드십시오.