カスタム高さがモバイル、タブレットでサイズ変更されないブートストラップレス対応カルーセル

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

これを試す

<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要素を作成しました：

@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 ; } 
} 

私は、テストのdivのクラスに私のHTMLのimgタグを包み、これは私の画像をリサイズそれに応じて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 

これは、boostrap.cssおよび/またはbootstrap.min.cssの事前定義されたプロパティであり、これが優先されていると仮定します。