사진 속 이미지의 종횡비
P粉557957970
P粉557957970 2023-08-17 20:24:04
0
1
486
<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>
P粉557957970
P粉557957970

모든 응답(1)
P粉547362845

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

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

으아악

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

으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿