사진 속 이미지의 종횡비
P粉557957970
2023-08-17 20:24:04
<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>
object-fit: contain
,那么图像的原始宽高比已经被保留,因为整个图像必须适应其父元素。所以,如果图像原始宽度为100px,高度为150px,并且您将图像设置为width: 100px
和height: 200px
,图像的高度仍然为150px,但是在figure
을 사용하는 경우 요소의 상단과 하단에 25px의 추가 공간이 추가됩니다.이 문제를 해결하려면 높이를 "자동"으로 설정하면 됩니다.
으아악이제 실제로 너비와 높이를 정의하고 이미지를 해당 크기에 맞추려면
으아악object-fit: contain
之外的其他方法。您可以在这里了解其他选项,但也许您想设置figure
요소의 너비/높이 이외의 다른 것을 사용하고 이미지가 해당 공간을 채우도록 해야 합니다. 이 경우 다음과 같이 할 수 있습니다: