ブラウザのサイズを変更するときにスライド画像を変更するにはどうすればよいですか？

私は画面の電話のサイズに行くときにスライドの画像を変更する方法はわかりません。私はBootStrapを使って最初のウェブサイトを構築しました。画面サイズが変わると、コンピュータ上では見た目がよく見えますが、画面サイズを変えると非常に小さい画像になります。私はそれは背の高い含まれている、あなたのための私の提案は、ページに2つの異なるスライダーを初期化することであるブラウザのサイズを変更するときにスライド画像を変更するにはどうすればよいですか？

、あなたが唯一のCSSでそれを処理しなければならない場合css media queriesを使用する必要が感謝

<!DOCTYPE html> 
<html lang="en"> 
<head></head> 

<!-- Carousel 
================================================== --> 
<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> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img class="first-slide" src="image/N-house000.jpg" alt="First slide"> 
      <div class="container"> 
       <div class="carousel-caption"> 
        <h1>IntopHome LTD</h1> 
        <p><a class="btn btn-lg btn-primary" href="contact.html" role="button">CONTACT US</p></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</html>

出典

2016-12-15 Shiliang Fang

：モバイルディスプレイ用の画像は、お使いのCSSのクエリでは、単純に、デスクトップ用とモバイル1を示すことが

CSSの例を非表示にするには？ –

こんにちは、それは、ボディータグを持って、私はちょうど私のコードの一部をコピーします。 –

メディアクエリを使用し、異なる解像度でイメージスライダの高さの幅を変更するか、レスポンシブデザインにブートストラップ/ MDLを使用できます。 –

、変更のためのCSSコードが必要あなたは `body`タグを必要としないでください

@media only screen and (max-width: 990px) { 
    .desktop_slider{display:none; visibility: hidden;} 
    .mobile_slider{display:block; visibility: visible;} 
}

出典

2016-12-15 11:24:54

素晴らしい、ありがとう！ –

ブラウザのサイズを変更するときにスライド画像を変更するにはどうすればよいですか？

答えて

関連する問題