css - 使用媒体查询停止图像大小调整

Question

有人知道为什么我的媒体查询不起作用吗？我希望我的图像在检测到 1000 像素或更大的屏幕时保持 1000 像素(这是原始图像大小)。

这是我的代码:

CSS:

    .header
    {
          height:100px;
          width:100%;
     }
    .header img
    { 
          width:100%;
     }

    @media screen and (min-width:1000px;)
      {

        .header
         {
           height:100px; 
           width:1000px; 
         }
        .header img
         {
           width:1000px;
         }  
      }             

HTML:

 <div class="header">
 <img src="/common/media/images/some-image.jpg" />
 </div>

Answer 1

只需使用 css 的 max-width 来设置图像的最大尺寸。那么它就不能比原来的尺寸大。

所以删除你的媒体查询，然后简单地使用这个:

.header {
    height:100px;
    width:100%;
}

.header img { 
    width:100%;
    max-width: 1000px;
}