모바일 화면에서 이미지 조정 방법

Question

다른 유형의 화면에서 슬라이더 이미지를 어떻게 조정해야합니까? 부트 스트랩을 사용하고 있습니다.

1. 크기 이미지를 사용하는 경우 슬라이더의 경우 : 1920px * 1228px; 그것은 랩톱 화면의 완전한 높이를 사용하고 있지만, 모바일 화면에서 보았을 때 대략 대략 커버합니다. 모바일 화면의 30 % (모바일 너비가 높이보다 상대적으로 작음).
2. 반면에 크기 1600 * 400 픽셀의 이미지를 사용하려고하는 경우; 노트북 화면에서 내 사이트 당 좋게 보이는 높이가 약 & 인 약 30 %를 차지하고 있지만이 경우 모바일 화면에서는 매우 작고 나쁨을 보입니다.

일부 CSS를 추가해야합니까?

여기 내 코드입니다.

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

     <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="images/Cimg5.jpg" alt="Los Angeles" style="width:100%;"> 
     </div> 

     <div class="item"> 
     <img src="images/Cimg2.jpg" alt="Chicago" style="width:100%;"> 
     </div> 

     <div class="item"> 
     <img src="images/Cimg3.jpg" alt="New york" style="width:100%;"> 
     </div> 

    <div class="item"> 
     <img src="images/Cimg4.jpg" alt="New york" style="width:100%;"> 
     </div> 

    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     <span class="sr-only">Next</span> 
    </a> 

</div> 

Answer 1

머리에 사용 viewport 다음 확인.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">