모바일, 태블릿에서 사용자 정의 높이가 조절되지 않는 부트 스트랩 반응 형 회전 장치

Question

나는 현재 전체 화면 (100 %)을 차지하는 너비와 이미지가있는 600px의 높이를 가진 반응 형 이미지 슬라이더를 가지고 있습니다. 다양한 크기의.

휴대 기기에서 브라우저의 크기를 조정하거나 문제가되는 사이트로 이동하면 맞춤 600px 높이 크기가 적용되어 이미지가 화면에 맞게 올바르게 크기가 조정되지 않습니다.

내 CSS 페이지에서 높이를 제거하고 높이를 주석 처리하면 더 이상 모바일 장치에서 문제가 발생하지 않으므로 이미지 크기가 적절하게 조정됩니다. 그러나 데스크톱 브라우저 내에서 나는 다양한 높이의 이미지가있는 이슈에 직면하고 css 속성을 가진 클래스를 적용하거나이 기능이 작동하지 않는 것처럼 img 태그 내 스타일 요소를 적용하면이를 극복 할 수 없습니다. 아래 예제 코드를 참조하십시오.

HTML :

<!-- 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> 
</ol> 

<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
    <div class="item active"> 
      <img class='img-responsive fill' src="img/example.jpg" > 
    </div> 
    <div class="item"> 
      <img class='img-responsive fill' src="img/example2.jpg"> 
    </div>   
</div> 

<!-- Controls --> 
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="icon-prev"></span> 
</a> 
<a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="icon-next"></span> 
</a> 

CSS :

header.carousel .fill { 
    width: 100%; 
    height: 600px; 
    background-position: center; 
    background-size: cover; 
} 

Answer 1

가장 쉬운 방법은 다른 화면 해상도 http://getbootstrap.com/css/#grid-media-queries 에 대해 서로 다른 높이를 설정하기 위해 부트 스트랩 미디어 쿼리를 사용하는 것입니다하지만 난 더 나은 거라고 몇 가지 화면 비율을 사용 여기에서 조정하기 http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Answer 2

시도해보기

,210

<style> 
@media only screen 
and (min-width : 1224px) { 
    #img1{ 
      height:600px !important; 
     } 
     #img2{ 
      height:600px !important; 
     } 
     </style> 

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

<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
    <div class="item active"> 
      <img class='img-responsive fill' id= "img1" src="img/example.jpg" > 
    </div> 
    <div class="item"> 
      <img class='img-responsive fill' id= "img2" src="img/example2.jpg"> 
    </div>   
</div> 

<!-- Controls --> 
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="icon-prev"></span> 
</a> 
<a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="icon-next"></span> 
</a> 

Answer 3

다음 해결 내 문제 :

나는 다음과 같은 CSS를 @media 요소를 만들어 : 다음 테스트 사업부 클래스 내 HTML의 img 태그 포장이 내 이미지 크기를 조정할

@media (min-width: 200px) { 
    div.test > img{ height: 300px !important ;} 
} 

@media (min-width: 300px) { 
    div.test > img{ height: 300px !important; } 
} 

@media (min-width: 400px) { 
    div.test > img{ height: 300px !important; } 
} 
@media (min-width: 600px) { 
    div.test > img{ height: 400px !important ;} 
} 
@media, (min-width: 800px) { 
    div.test > img{ height: 600px !important ; } 
} 

이에 따라 CSS 속성을 가진 다음 CSS 속성을주의 할

<!-- 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> 
</ol> 

<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
    <div class="item active"> 
      <div class="test"><img class='img-responsive fill' src="img/example.jpg" ></div> 
    </div> 
    <div class="item"> 
      <div class="test"<img class='img-responsive fill' src="img/example2.jpg"></div> 
    </div>   
</div> 

<!-- Controls --> 
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="icon-prev"></span> 
</a> 
<a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="icon-next"></span> 
</a> 

한가지없이 작동하지 않았다 :

!important 

나는 이것이 boostort.css 및/또는 bootstrap.min.css 사전 정의 된 속성에 의한 것이라고 가정합니다.