图像在某些屏幕尺寸后不能调整大小

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