圖像在某些屏幕尺寸後不能調整大小

Question

所有4張圖像連續排列。但是在屏幕尺寸1920之後。我不想讓圖像縮放但保持其原始尺寸。

如何寫@media查詢它

<div class='row portfolio-boxes'> 
    <div class='col-sm-3 col-xs-6 no-mb-t-xs portfolio-box'> 
     <a class='image-link' href='#'>      
      <img class="img-responsive center-block" alt="Etiam vestibulum" src="images/1.jpg" /> 
     </a> 
     <h3 class='title'>BODY</h3> 
    </div> 
    <div class='col-sm-3 col-xs-6 no-mb-t-xs portfolio-box'> 
     <a class='image-link' href='#'>       
      <img class="img-responsive center-block" alt="Malesuada" src="images/2.jpg" />     
     </a> 
     <h3 class='title'>PAINT</h3> 
    </div> 
    <div class='col-sm-3 col-xs-6 portfolio-box'> 
     <a class='image-link' href='#'> 
      <img class="img-responsive center-block" alt="Dictum vulputate" src="images/3.JPG" />    
     </a> 
     <h3 class='title'>WHEELS</h3> 
    </div> 
    <div class='col-sm-3 col-xs-6 portfolio-box'> 
     <a class='image-link' href='#'> 
      <img class="img-responsive center-block" alt="Semper massa" src="images/5.jpg" />     
     </a> 
     <h3 class='title'>DETAILING</h3> 
    </div> 
</div> 

Answer 1

如果你想恢復到原來的尺寸圖像，試試這個：

@media (min-width: 1920px) { 
    .img-responsive { 
    width: auto; 
    height: auto; 
    } 
} 

您可以更改寬度和高度值無論你需要他們如何。如果窗口大小至少爲1920像素或更寬，則此媒體查詢僅會觸發。

Answer 2

引導有4個媒體查詢，在它的responsive.css文件：

@media screen and (max-width: 767px) 
@media (min-width: 768px) and (max-width: 991px) 
@media (min-width: 992px) and (max-width: 1199px) 
@media (min-width: 1200px) 

最後一個代表所有視口，寬度> = 1200像素和IMG響應CSS是在bootstrap.css文件中。

您需要限制1200和1919之間的x大視口，以保持您可能用於其他CSS的新的邏輯視口大小，並創建大於或等於1920的新視口並覆蓋使用img-使用css !important進行響應，並將寬度和高度均設爲自動：

@media (min-width: 1200px) and (max-width: 1919px) { 

    .bottom-lg-30{margin-bottom: 30px!important} 
    .bottom-lg-20{margin-bottom: 20px!important} 
    .bottom-lg-10{margin-bottom: 10px!important} 

} 

@media (min-width: 1920px) { 
    .img-responsive { 
    width: auto!important; 
    height: auto!important; 
    } 
}