사진 속 이미지의 종횡비

Question

다음과 같은 캡션이 포함된 이미지가 있습니다.

<그림>
<img src="image.jpg"/>
<figcaption>제목</figcaption>
</그림>

CSS에는 img{max-width:100%}도 있습니다.

이미지의 너비와 높이를 모두 설정하고 너비가 설정된 값보다 작아지면 이미지의 가로 세로 비율을 유지하고 싶습니다. 그래서 다음과 같은 코드를 시도해 보았습니다.

<그림>
<img src="image.jpg" width="100" height="200" style="object-fit:contain"/>
<figcaption>제목</figcaption>
</그림>

대략 제가 원하는 내용인데, 이미지가 '레터박스'된 경우 제목이 이미지 하단에서 꽤 멀리 떨어져 있습니다.

제목을 이미지 하단에 꼭 맞게 유지하면서 원하는 결과를 얻을 수 있는 방법이 있나요?

Answer 1

object-fit: contain，那么图像的原始宽高比已经被保留，因为整个图像必须适应其父元素。所以，如果图像原始宽度为100px，高度为150px，并且您将图像设置为width: 100px和height: 200px，图像的高度仍然为150px，但是在figure을 사용하는 경우 요소의 상단과 하단에 25px의 추가 공간이 추가됩니다.

이 문제를 해결하려면 높이를 "자동"으로 설정하면 됩니다.

으아악

이제 실제로 너비와 높이를 정의하고 이미지를 해당 크기에 맞추려면 object-fit: contain之外的其他方法。您可以在这里了解其他选项，但也许您想设置figure 요소의 너비/높이 이외의 다른 것을 사용하고 이미지가 해당 공간을 채우도록 해야 합니다. 이 경우 다음과 같이 할 수 있습니다:

으아악