我正在尝试在HTML中创建一个包含图像的流体布局。现在，我支持两种大小的布局。默认布局用于显示1000像素宽的网站。如果屏幕足够宽（大于1200像素），我将使用CSS媒体查询增强许多方面。
我有一个DIV容器，对于默认布局宽度为600像素，对于增强布局为700像素。里面有一个随机图像，我知道一些元数据（宽度和高度）。如果图像太大无法适应容器，我可能需要缩小图像。
因此，我使用以下代码实现流动布局：
这是它的工作原理：
对于默认布局，应用内联样式。因此，图像被缩小到600px/369px以适应容器。 否则，媒体查询样式适用，图像处于其默认宽度/高度（我知道图像从未超过700px，所以一切正常）。
我的问题来自浏览器加载状态和预留空间。Chrome / Firefox的行为相同，但对我来说很奇怪。未使用IE进行测试（实际上不是我的优先事项）
对于默认布局，没有问题，仍然应用内联样式。浏览器显示与图像相对应的白色空间。
对于增强布局，应用“自动”大小。但是，浏览器在图像未完全加载时不知道其自然大小，而似乎“自动”等效于0px。如果设置的图像宽度和高度属性应用，则会非常完美。但情况并非如此。结果是不为图像保留任何空间，这不是我想要的行为。
我找到的第一个解决方案是为图像添加另一个内联CSS规则。如果我添加“min-width：600px; min-height：369px”，则为图像保留的空间始终为600x369像素，而不是增强布局的0像素。那更好了，但还不够完美。
- 你认为呢？ - 是否可能“重置”CSS而不是使用“auto！important”规则覆盖它？ - 我应该采用其他方法吗？ - 我可以使用一些JavaScript，但我认为依赖它是一个坏主意。实际上，我可能有很多类似上面描述的容器。我更喜欢自动解决方案（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以适应容器。 否则，媒体查询样式适用，图像处于其默认宽度/高度（我知道图像从未超过700px，所以一切正常）。
我的问题来自浏览器加载状态和预留空间。Chrome / Firefox的行为相同，但对我来说很奇怪。未使用IE进行测试（实际上不是我的优先事项）
对于默认布局，没有问题，仍然应用内联样式。浏览器显示与图像相对应的白色空间。
对于增强布局，应用“自动”大小。但是，浏览器在图像未完全加载时不知道其自然大小，而似乎“自动”等效于0px。如果设置的图像宽度和高度属性应用，则会非常完美。但情况并非如此。结果是不为图像保留任何空间，这不是我想要的行为。
我找到的第一个解决方案是为图像添加另一个内联CSS规则。如果我添加“min-width：600px; min-height：369px”，则为图像保留的空间始终为600x369像素，而不是增强布局的0像素。那更好了，但还不够完美。
- 你认为呢？ - 是否可能“重置”CSS而不是使用“auto！important”规则覆盖它？ - 我应该采用其他方法吗？ - 我可以使用一些JavaScript，但我认为依赖它是一个坏主意。实际上，我可能有很多类似上面描述的容器。我更喜欢自动解决方案（CSS非常适合这种情况）。