重置通过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 样式。

Answer 2

我见过的响应式图像的一般方法是让父元素（如 .container）通过媒体查询更改大小。在您的标记中删除宽度和高度属性，然后在您的 CSS 中添加：

img {
   width: 100%;
 }

由于您的父元素的大小由媒体查询规则决定，因此您的图像会相应地增长。

我提出这个问题是因为您似乎想使用相同的图像文件，但只是让它增长/缩小。主要缺点是更大的图像可能会加载到移动设备屏幕上，并增加页面加载。这是当前响应式设计面临的主要技术障碍，关于解决它的最佳方法存在很大争议。

Answer 3

您可以将width 或height 设置为initial.. 重置覆盖时的值..