2016-05-26 5 views
0

画像の高さと幅は、ブートストラップに異なるメディアスクリーンのために固定されなければならない3.ブートストラップサムネイルクラスの特定のメディア画面の画像サイズを修正するには?

注:画像は、ブートストラップのサムネイルクラス内にある

例:

<div class="thumbnail> 
<img /> 
</div> 

私はとCSSスタイルを書きました..

@media screen and (min-width: 970px) 

{ 
    .thumbnail {  
     width: 291px !important; 
    } 

    .cardViewImage{ 
     height: 167px !important; 
     width: 291px !important; 
    } 
} 

@media only screen and (min-width: 1170px) 
{ 
    .thumbnail{ 
     width: 356px !important; 
    } 
    .cardViewImage{ 
     height: 204px !important; 
     width: 356px !important; 
    } 
} 

ブートストラップのサムネイルクラスは、diffメディア画面の画像サイズを修正できないためです。特定のメディア画面で変更したくないメディア画面に応じて、幅が変わります。

答えて

0

画像を一定の幅にしたいですか?

@media screen and (min-width: 970px) 

{ 
    .thumbnail img{  
     width: 291px !important; 
    } 

    .cardViewImage{ 
     height: 167px !important; 
     width: 291px !important; 
    } 
} 

@media only screen and (min-width: 1170px) 
{ 
    .thumbnail img{ 
     width: 356px !important; 
    } 
    .cardViewImage{ 
     height: 204px !important; 
     width: 356px !important; 
    } 
} 
0

てみてください。この

@media screen and (min-width: 970px) 

{ 
    .thumbnail { 
     max-width:100% !important; 
     width: 291px !important; 
    } 

    .thumbnail img{ 
     width: 100% !important; 
    } 
} 

@media only screen and (min-width: 1170px) 
{ 
    .thumbnail { 
     max-width:100% !important; 
     width: 356px !important; 
    } 

    .thumbnail img{ 
     width: 100% !important; 
    } 
} 

は、それが役に立つことを願っています。ありがとうございました

関連する問題