Question

我正在尝试在html中创建包含图像的流体布局。目前，我支持2种尺寸的布局。默认布局用于显示1000px宽的站点。如果屏幕足够宽（宽度超过1200像素），我会通过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）改变媒体查询的大小。在您的标记中删除宽度和高度属性，然后在CSS中添加：

img {
   width: 100%;
 }

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

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

Answer 2

您只需将width或height设置为initial ..即可重置覆盖值。

Answer 3

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

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

3 个答案: