0
부트 스트랩에 슬라이더를 쓰고있었습니다. 다음은 모바일 장치에서 볼 수있는 대용량 화면 v/s에서 본 이미지 비교입니다.동일한 크기의 슬라이더 이미지를 유지하려면 어떻게해야합니까?
노트북 화면 :
모바일 화면 :
이동 화면의 결과뿐만 아니라 화상의 크기의 텍스트를 도시 슬라이더를 끼 웁니다. 노트북 화면에 보이는 것처럼 이미지를 어떻게 맞추는가? 여기
슬라이더 코드입니다 :<!-- slider -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- 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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src='./images/charity11.jpg' class='img1' />
<div class="carousel-caption">
<h3 class='title'>Let Us All Come Together</h3>
<em class='subtext'>"..and be a blessing to someone else."</em>
</div>
</div>
<div class="item">
<img src='./images/child2.jpg' class='img1' />>
<div class="carousel-caption">
<h3 class='title'>Education is the vaccine for violence</h3>
<em class='subtext'>"..and love, the poet said, is woman's whole existence."</em>
</div>
</div>
<div class="item">
<img src='./images/tree.jpg' class='img1' />
<div class="carousel-caption">
<h3 class='title'>Lend a hand to save trees</h3>
<em class='subtext'>"..let the green be seen."</em>
</div>
</div>
<div class="item">
<img src='./images/dr1.jpg' class='img1' />
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- slider ends -->
CSS는 :
슬라이더는 화면 폭의 확장,하지만 높이가 항목 클래스 때문에 변경되지 않는 것 같다.item{
background: #333;
text-align: center;
height: 420px !important;
}