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

Posted 2023-03-06

【中文标题】重置通过css设置的图像宽度和高度

【英文标题】：Reset image width and height set via css

【发布时间】：2012-04-14 05:06:57

【问题描述】：

我正在尝试在 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"   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 非常适合）。

【问题讨论】：

您知道是否可以为元素添加内联媒体查询？我不认为这是可能的。但如果是，我可以写：

相关：***.com/questions/44010645/…

【参考方案1】：

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

【讨论】：

我只需要默认布局的样式是对的。因此，当我检测到增强的布局时，我可以使用 Javascript 删除该类。但是正如我在第一篇文章末尾所说的那样，这样做我失去了 css 媒体查询提供的所有强大功能，不是吗？

【参考方案2】：

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

img 
   width: 100%;
 

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

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

【讨论】：

我刚做了一个测试。实际上我面临着完全相同的问题，但出于某种原因，我没有在第一篇文章中解释。我知道容器的宽度，但我不知道它的高度。我希望容器的高度与子图像相同。所以，在加载图片的过程中，容器仍然没有高度。

关于在两种布局中使用相同的图像，我有两个原因：（1）如果图像宽度小于 600 像素，那么两种布局都是完全相同的图像。 (2) 我认为从 600px 到 700px 的开销不足以暗示图像的重要减重。但是如果我有 2 张图片，我必须将 2 张图片存储在服务器端。

Re：图像大小 - 这是使用相同图像的好理由。 100px 的差异不足以保证更复杂的解决方案。回复：父容器 - 如果您没有设置父容器的显式高度，它应该随着图像增长，而不管图像的高度。你不是这样吗？

【参考方案3】：

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

【讨论】：

这实际上是行不通的。如果图像具有width 和height 属性，并且有任何设置宽度的css，那么似乎没有办法让它尊重属性值......