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

我试图在html中创建一个流体布局，包含图像。现在，我支持2种尺寸的布局。默认布局用于显示1000px宽的网站。如果屏幕足够宽（宽度超过1200像素），我会用css媒体查询来增强许多方面。重置图像的宽度和高度设置通过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以适应容器。否则，媒体查询风格适用，并且图像处于其默认宽度/高度（我知道图像不会超过700像素，因此一切正常）。

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

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

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

我发现的第一个解决方案是为图像添加另一个内联css规则。如果我添加“最小宽度：600px;最小高度：369px”，图像的保留空间始终为600x369像素，而不是增强版式的0像素。这更好，但还不完美。

- 你怎么看？

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

来源

2012-03-30 Mat

你知道它是否可以添加一个内嵌媒体查询一个元素？我不认为这是可能的。但是，如果是这样，我可以这样写： – Mat 2012-03-30 14:56:41

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

来源

2012-03-30 13:48:20

这是正确的，我只需要默认布局的样式。所以当我检测到增强的布局时，我可以用Javascript删除这个类。但正如我在我的第一篇文章结束时所说的，通过这样做，我松散了CSS媒体查询提供的所有优秀功能，不是吗？ – Mat 2012-03-30 14:52:43

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

img { 
    width: 100%; 
}

当你的父元素的大小是由媒体查询规则规定，你的图像将相应增长。

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

来源

2012-03-30 13:55:52 chipcullen

我刚做了一个测试。其实我也面对同样的问题，但是由于我在第一篇文章中没有解释的原因。我知道容器的宽度，但我不知道它的高度。我希望容器的高度与子图像相同。因此，在图像加载过程中，容器仍然没有高度。 – Mat 2012-03-30 14:42:56

关于对两种布局使用相同的图像，我有两个原因：（1）如果图像宽度小于600px，则两个布局的图像完全相同。（2）我认为从600像素到700像素的开销不足以暗示图像的重量减轻。但是如果我有2张图片，我必须在服务器端存储2张图片。 – Mat 2012-03-30 14:48:17

Re：图像大小 - 这是使用相同图像的一个很好的理由。 100px的差异不足以保证更复杂的解决方案。 Re：父容器 - 如果你没有设置父容器的显式高度，它*应该随图像一起增长，而不管图像的高度如何。你不是这种情况吗？ – chipcullen 2012-03-30 16:52:26

你可以设置复位上覆盖该值的width或height到initial ..

来源

2015-07-29 12:31:26

而不是没有！使用初始..我的坏... – 2015-07-29 12:32:55

这实际上不起作用。如果图像具有“宽度”和“高度”属性，并且有任何设置宽度的css，那么似乎没有办法让它符合属性值... – 2017-12-18 18:59:10

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

回答

相关问题