<p>다음과 같은 캡션이 포함된 이미지가 있습니다. </p> <pre class="brush:php;toolbar:false;"><그림> <img src="image.jpg"/> <figcaption>제목</figcaption> </그림></pre> <p>CSS에는 <code>img{max-width:100%}</code>도 있습니다. </p> <p>이미지의 너비와 높이를 모두 설정하고 너비가 설정된 값보다 작아지면 이미지의 가로 세로 비율을 유지하고 싶습니다. 그래서 다음과 같은 코드를 시도해 보았습니다. </p> <pre class="brush:php;toolbar:false;"><그림> <img src="image.jpg" width="100" height="200" style="object-fit:contain"/> <figcaption>제목</figcaption> </그림></pre> <p>대략 제가 원하는 내용인데, 이미지가 '레터박스'된 경우 제목이 이미지 하단에서 꽤 멀리 떨어져 있습니다. </p> <p>제목을 이미지 하단에 꼭 맞게 유지하면서 원하는 결과를 얻을 수 있는 방법이 있나요? </p>