고정된 이미지 크기를 유지하면서 반응형 디자인을 달성하는 방법은 무엇입니까?
P粉739706089
2023-08-16 14:35:27
<p>이미지가 늘어나지 않고 16:9 컨테이너에 맞도록 이미지 크기를 조정하는 다음 CSS(부트스트랩 사용)가 있습니다. </p>
<pre class="brush:php;toolbar:false;"><span class="bg-dark d-flex justify-content-center align-items-center style="width: 384px;
높이: 216px">
<img
:src="slotProps.item.itemImageSrc"
:alt="slotProps.item.alt"
스타일="최대 너비: 100%; 최대 높이: 100%"
/>
<p>이 방법은 효과가 있지만 부트스트랩 그리드에서 사용하면 이미지가 그리드를 넘치게 됩니다. (크기를 절대값으로 고정했기 때문인 것 같습니다.) 이미지 크기를 조정하되 넘치지 않게 하려면 어떻게 해야 합니까? </p>
<p>(배경 정보: 이것은 갤러리 구성 요소에서 사용되고 있으며, 들어오는 이미지의 크기가 다를 수 있으므로 동일한 크기의 컨테이너에 표시하려면 모두 크기를 조정해야 합니다. 상단에 검은색 이미지가 있거나 하단 여백)</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이 문제를 해결하려면
으아악object-fitCSS 속성을 사용할 수 있습니다. object-fit 속성은 컨테이너에 맞게 이미지 크기를 조정하는 방법을 지정합니다. 커버 값은 가로 세로 비율을 유지하면서 전체 컨테이너를 채우도록 이미지 크기를 조정합니다.