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

Question

有没有人知道我的媒体查询无效的原因。我希望我的图像在检测到1000px或更高的屏幕时保持1000px（这是原始图像大小）。

这是我的代码：

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

用

替换100％

.header img     {           的最大宽度：1000像素;      }

Answer 2

只需使用css＆＃39; max-width来设置图片的最大尺寸。然后它不能大于原始大小。

请删除您的媒体查询，然后使用：

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

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