重置通过 css 设置的图像宽度和高度

Question

我正在尝试在 html 中创建一个包含图像的流体布局。现在，我支持 2 种尺寸的布局。默认布局用于显示 1000 像素宽的站点。如果屏幕足够宽（大于 1200 像素），我会使用 css 媒体查询增强许多方面。

我有一个 DIV 容器，默认布局宽度为 600 像素，增强布局宽度为 700 像素。里面有一个随机图像，我知道一些元数据（宽度和高度）。如果图像对于容器来说太大，我可能需要缩小图像的大小。

所以我使用这段代码来实现流畅的布局

<div class="container">
  <!-- for a 650px/400px image, the downsized version is 600px/369px -->
  <img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>

和风格

@media screen and (min-width:1200px){
  .container IMG {
    width:auto !important;
    height:auto !important;
  }
}

• 下面是它的工作原理：

在默认布局的情况下，内联样式适用。所以图像被缩小到 600px/369px 以适合容器。否则，将应用媒体查询样式，并且图像处于其默认宽度/高度（我知道图像的宽度永远不会超过 700 像素，因此一切正常）。

• 我的问题来自图像的加载状态和浏览器保留的空间。chrome/firefox 的行为是相同的，但对我来说很奇怪。没有用 IE 测试（实际上不是我的优先事项）

对于默认布局，没问题，内联样式仍然适用。浏览器显示与图像对应的空白区域。

对于增强布局，“自动”尺寸适用。但是浏览器在没有完全加载时不知道图像的自然大小，并且看起来“auto”相当于0px。如果应用了为图像设置的宽度和高度属性，那将是完美的。但事实并非如此。结果是没有为图像保留空间，这不是我想要的行为。

• 我发现的第一个解决方案是为图像添加另一个内联 css 规则。如果我添加 "min-width:600px; min-height:369px" 图像的保留空间始终为 600x369 像素，而不是增强布局的 0 像素。那更好，但还不完美。

- 你觉得怎么样 ？

• 是否可以“重置”css 而不是使用“auto !important”规则覆盖它？
• 我应该使用其他方法吗？
• 我可能会使用一些 javascript，但我认为依赖它是一个坏主意。实际上，我可能有很多类似于上述容器的容器。我更喜欢自动解决方案（css 非常适合）。

Answer 1

然后您可以使用.container IMG.someClass { ... }从图像中删除类名来删除 CSS 样式。