显示块和高度不适用于图像

Question

因此，当屏幕分辨率低于740像素时，我希望自动调整图像大小。 此代码在@media之外。

header img {
  display: block;
  height: 150px;
  margin: auto;
}

@media screen and (max-width: 740px) {
  header img {
    display: block;
    width: 100%;
    height: auto;
  }
}

<header>
  <img src="https://images.vexels.com/media/users/3/137694/isolated/lists/35e10823069d1767521320dc34475465-triangle-logo-geometric.png">
</header>

此代码无效！为什么？当我检查chrom dev工具中的代码时，这些属性将被删除，除了width:100%;！

Answer 1

第一个定义是默认样式。添加！important以强制执行屏幕样式

@media screen and (max-width: 740px){
   header img{
       height:auto !important;
   }