Question

所有4张图片都连成一排。但在屏幕尺寸为1920之后。我不希望图像按比例缩放，但保持其原始尺寸。

如何为它编写@media查询

open

Answer 1

如果您希望图片恢复原始尺寸，请尝试以下操作：

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

您可以将宽度和高度值更改为您需要的值。仅当窗口大小至少为1920像素或更宽时，才会触发此媒体查询。

Answer 2

Bootstrap在其responsive.css文件中有4个媒体查询：

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

最后一个表示宽度为＆gt; = 1200px的所有视口，并且bootstrap.css文件中提供了img-responsive CSS。

您需要限制介于1200和1919之间的x-large视口，以保留可用于其他CSS的新逻辑视口大小，并创建大于或等于1920的新视口并覆盖img-responsive的使用使用css !important并将宽度和高度都设置为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;
  }
}

图像不会在特定屏幕尺寸后调整大小

2 个答案: