使用css删除高度自动答案

【问题标题】：Remove height auto using css使用css删除高度自动
【发布时间】：2021-05-25 19:42:05
【问题描述】：

我的图片在 html 中有宽度和高度，但也有一个样式表会影响这些高度为 auto 的图片

如何使用 css 重置/覆盖此属性以使 html 高度生效？

HTML：

<img src="..." width="350" height="150" />

CSS：

img {
  height: auto;
}

JSFiddle

更多信息：
我在我无法完全控制的环境中实施 img 延迟加载（PrestaShop 电子商务）。
准备好文档后，我将 img src 设置为透明像素，但正如 js-fiddle 所示，尽管 html 中的宽度/高度不同，但图像仍为平方。
由于高度自动道具，高度跟随宽度。
当脚本将高度样式设置为错误值时，这会导致“跳跃”以及一些错误。

【问题讨论】：

对于使用链接 JSFiddle 的人的注意事项：以 // 开头的 cmets 在 CSS 中无效，因此如果您将它们放在第二个 img 样式中的声明在原评论。
你能包含更多的标记吗？像父 div 等。也许可以调整其中一些图像的方式。
如果我正确地假设您不想使用 CSS 手动将高度 back 覆盖到其 HTML 原件，那么我认为这是不可能的。
在我看来，没有类选择器覆盖高度的图像标签的通用声明并不是最佳实践。如果任何 .img-height-auto 应该定义样式，并且当需要自动高度覆盖时，应该将其添加到 img 标签中，例如 class="img-height-auto"
我有点确定 CSS 不可能做到这一点，但这些年来 CSS 从未停止让我感到惊讶，所以我说让我试一试：D

标签： html css height

【解决方案1】：

虽然这个答案感觉有点便宜，但我真的相信这是您正在寻找的答案......

你不能。

一旦您在 CSS 中的 img 上设置了 height，HTML 声明就会立即被覆盖。 CSS 中没有办法进一步忽略该声明并使用 HTML 指定的高度，因为像 initial 这样的东西引用 CSS 定义的属性 ( source)，没有关联的 HTML 属性。

请参阅CSS Height 的此参考，其中列出了所有属性值：^{^{*省略了实验/不支持的值}}

高度：自动 | 长度 | % |继承 |初始

如果您尝试使用上述任何属性值重新定义 height 或 img，它们将不起作用 - 我已经尝试了每一个以确保。

length 和 % 需要定义高度，这似乎正是您要避免的事情
initial 只会获取height: auto; 的初始 CSS 声明
inherit 没有可以继承的祖先，因此它回退到默认的 auto

您唯一真正的选择是覆盖 CSS 中的高度，或者使用内联样式（如 Carter 所建议的那样）...

<img style="height: 150px;" />

或者通过应用 ID 或类等选择器...

<img id="my_image" />

#my_image {
    height: 150px;
}

或者，如果您需要使用 JS 自动生成覆盖，请考虑类似以下 jQuery 解决方案：

$("img").each(function() {        //Loop through all images
    var $t = $(this);             //$t is the current iteration
    var ht = $t.attr("height");   //Get the HTML height
    ht = ht ? ht+"px" : "auto";   //If HTML height is defined, add "px" | Else, use "auto"
    $t.css("height", ht);         //Apply the height to the current element
});

这将遍历页面上的所有图像并应用 CSS 高度来匹配 HTML 高度。如果没有 HTML 高度，它将使用height: auto;。

【讨论】：

谢谢，我会接受这一点，因为我现在确定了限制。我将使用 js 读取 height 属性并使用样式强制它，并希望它不会导致其他脚本出现任何错误，因为我处于不可预测的环境中（如问题中所述）
@UnLoCo 欣赏它。我已经编辑了我的答案以包含一个 jQuery 解决方案，以防它对您有帮助！

【解决方案2】：

您可以使用内联 css 覆盖您的其他 css。 img高度不会覆盖css因为是html所以需要使用<img src="..." width="350" style="height:150px;" />

【讨论】：

据我了解，OP 试图“忽略”CSS 高度，而不是简单地重新指定。同样，这只是我的解释，但如果 OP 有 100 个设置了 HTML 高度的图像，他想一举将这些图像用作覆盖。就像 CSS height: ignore-CSS-and-use-HTML 属性一样，因为没有更好的解释。
@Santi 我认为可能是这种情况，但我没有足够的代表发表评论，所以我只是选择了这个答案。
明白，我想我们会看到的。无论哪种方式，您的建议是一个答案，OP 可能只是让门打开的程度超出了预期。话又说回来，这可能正是他/她正在寻找的东西！
我现在投票赞成你的答案，我将在问题中提供有关我的案例的更多信息
我也对你投了赞成票，因为它确实是一个有效的解决方案，而且我在很多场合都出于其他原因使用过这个解决方案。

【解决方案3】：

最佳实践是不要全局定义所有具有覆盖高度的 img 标签。如果可以的话，我会将该声明更改为：

img.auto-height {
  height: auto;
}

在任何需要在图像上设置自动高度的地方，然后添加 class="auto-height"

【讨论】：

投了赞成票，但不幸的是我无法控制环境！
真糟糕:(

【解决方案4】：

虽然它并没有完全消除，但您可以尝试其他几种方法来解决它。

通过父级调整高度

div img { height: 150px; }

或使用pseudo-selector

img:nth-child(1n){ height: 150px; }

img:nth-child(1n){
  height: 150px;
}
img {
  height: auto;
}

&lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="width="350" height="150"&gt;

【讨论】：

【解决方案5】：

您可以使用以下命令覆盖高度：

height: unset;

浏览器支持all except IE

【讨论】：

这不起作用。它将高度恢复为initial，正如上面的答案所说，它给出了height: auto。
"除了 IE"... 简单的解决方案ihateinternetexplorer.com

【解决方案6】：

如果您将延迟加载应用到所有图像，那么您可以仅在应用延迟魔法后将该图像设置为“自动”大小：

img:not(.lazy) {
  height: auto;
}

在加载真实图片的同时，会应用html属性height="X"，预计会更接近真实图片尺寸。

另一个帮助我避免这种移位效果的技巧是使用比例更接近最终图像的 base64 图像占位符（通常在大多数情况下，2:1 比 1:1 方形像素更适合）。

【讨论】：