问题描述:

all the 4 images comes in a row. But after screen size 1920. I do not want the image to scale but keep its original dimensions.

How to write @media query for it

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

网友答案:

If you want the image to revert to its original dimensions, try this:

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

You can change the width and height values to whatever you need them to be. This media query only triggers if the window size is at least 1920 pixels or wider.

网友答案:

Bootstrap has 4 media queries in it's responsive.css file:

@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) 

The last one represents all viewports with width >= 1200px and the img-responsive CSS is available in the bootstrap.css file.

You need to limit the x-large viewport between 1200 and 1919 just to keep a new logical viewport size that you may use for other CSS, and create a new viewport greater than or equals 1920 and override the use of img-responsive using css !important and set the width and height both to auto :

@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;
  }
}
相关阅读:
Top