고정된 이미지 크기를 유지하면서 반응형 디자인을 달성하는 방법은 무엇입니까?
P粉739706089
P粉739706089 2023-08-16 14:35:27
0
1
455
<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>
P粉739706089
P粉739706089

모든 응답(1)
P粉191610580

이 문제를 해결하려면 object-fit CSS 속성을 사용할 수 있습니다. object-fit 속성은 컨테이너에 맞게 이미지 크기를 조정하는 방법을 지정합니다. 커버 값은 가로 세로 비율을 유지하면서 전체 컨테이너를 채우도록 이미지 크기를 조정합니다.

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