모바일 화면의 너비와 높이를 2 개의 사이드 바이 사이드 이미지로 자동 맞추는 방법은 무엇입니까?

Question

화면에 항상 2 개의 이미지 (동일한 크기)를 맞추려고합니다. 즉, 화면 너비가 제한 요소 인 경우 너비가 각각 50 %를 차지해야하며 높이가 제한 요소 인 경우, 화면 높이의 100 %로 표시해야합니다. 다음은 내 휴대 전화에서 세로로 (폭이 맞음) 완벽하게 작동하지만 가로로 뒤집 으면 너비가 여전히 완벽하게 맞지만 이미지가 높이보다 깁니다.

너비와 높이를 모두 고려하여 크기를 조정하면 두 이미지가 항상 나란히 표시되어 완벽하게 볼 수 있습니다.

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <img class="img-responsive col-xs-6" src="..." alt="card1" /> 
 
     <img class="img-responsive col-xs-6" src="..." alt="card2" /> 
 
    </div> 
 
</div>

Answer 1

아래 같은 코드를 포함하는 사용자 정의 스타일 시트를 사용할 수 있습니다

@media screen and (min-height: 321px /* or max-height: 321px */) { 
 
    .img-responsive { 
 
    width: 100%; 
 
    height: auto; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    object-fit: cover; 
 
    } 
 
}