콘텐츠 높이에 따라 이미지 높이 조절

Question

이미지 높이를 높이기 위해 아래의 jQuery를 코딩했으며 그 옆에있는 콘텐츠 높이에 따라 적절하게 조정합니다. 제 코드 CodePen을보십시오. 내 문제는, 화면 너비의 크기를 조정할 때마다 이미지의 높이가 동적으로 조정되지 않는다는 것입니다. 어떻게이 전체 동적 솔루션을 얻을 수 있습니까? 가능하다면 나를 도와주세요.

function setImageHeight() { 
    $('.single-tile').each(function(){ 
    var tile_height = $(this).height(); 
    $(this).find('.image').height(tile_height); 
    } 
); 
} 
$(document).ready(function() { 
    setImageHeight(); 
}); 
$(window).resize(function() { 
    setImageHeight(); 
}); 

Answer 1

응답 높이는 CSS 속성을 높이 : 100 %로 설정하고 응답 너비는 여백 : 자동으로 설정합니다. 그래서 아래의 CSS 클래스는 당신을 위해 트릭을 할 것입니다. 내 목표는 이미지 사업부 내에서뿐만 아니라 콘텐츠 사업부 내 빈/공백의 어떤 종류를 방지하기 때문에

.responsive-image { 
height:100%; 
margin:auto; 
}