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

Question

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

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

所以我使用这个代码来进行流畅的布局

<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以适合容器。否则，应用媒体查询样式，并且图像处于其默认宽度/高度（我知道图像永远不会超过700px，所以一切都很好）。

• 我的问题来自图像的加载状态和浏览器保留的空间。 chrome / firefox的行为是一样的，但对我来说很奇怪。未经IE测试（实际上不是我的优先级）

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

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

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

- 你怎么看 ？

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

Answer 1

我看到的响应式图像的一般方法是使用父元素（如.container）更改大小与媒体查询。在你的标记中删除width和height属性，然后在CSS中添加：

img {
   width: 100%;
 }

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

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

Answer 2

你可以将width或height设置为initial ..重置覆盖值。

Answer 3

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