用 CSS 覆盖 HTML img [关闭]

Posted 2023-03-05

【中文标题】用 CSS 覆盖 HTML img [关闭]

【英文标题】：Overriding HTML img with CSS [closed]

【发布时间】：2011-10-23 18:53:12

【问题描述】：

我的 jpeg 是它以前的自我的像素化肥胖外壳......是否可以用 css 样式表实际覆盖 html img 高度/宽度代码，而不是仅仅拉伸已经调整的图像？我问的原因是客户让我使用godaddy的快速购物车（邪恶）。它生成的代码会更改 html 中图像的大小。 Godaddy 只允许 css 更改，这就是我设法至少将图像拉伸回原始大小的方法。不幸的是，尽管我已经编写了 img css，但似乎首先将 html 应用于图像，然后 css 将图像扩展为讨厌的像素。有可能，除了 html 中的高度和宽度规范之外，godaddy 实际上已经在他们的服务器上将图像转换为更小的尺寸，尽管他们的技术人员否认了这一点，因此代码将是多余的。我正在使用的 CSS 粘贴在下面，GoDaddy 生成的不变代码也是如此。

//FROM CSS

td.imageRow 
  padding: 10px 0 5px;
  vertical-align: middle;
  width:192px;
  height:250px;


.productTable img 
  border: 0 none;
  width:192px;
  height:250px;


.productTable a 
  width:192px;
  height:250px;



//FROM HTML
<tbody>
<tr><td class="imageRow"><a href="/Logo.htm">
    <img    src="/images/13129490572471789450105.jpeg">
    </a></td><td class="noBorder"></td><td class="noBorder"></td></tr>
    <tr><td class="titleRow"><a href="/Logo.htm">Logo</a></td><td></td><td></td></tr>
    <tr><td class="priceRow"></td><td></td><td></td></tr>
    <tr><td class="spacer">&nbsp;</td></tr>

【问题讨论】：

如果您在新选项卡/窗口中单独查看图像。图像的尺寸是多少？

这是调整大小的较小版本，但 html 在 img 标签中没有高度宽度定义——这让我相信 godaddy 是在服务器上做的。那可能是它，jquery 与否。但是为什么他们会在常规站点上有多余的代码呢？ @Webars 我将尝试加载该 jquery 代码。可能会在转换之前捕获它。

在 html 中为 img 标签添加宽度和高度通常是个好主意，这使得图像出现在屏幕上的位置已经具有正确的布局，那么如果由于某种原因，图像不会出现，页面布局不会乱...所以我的意思是，无论您是否使用 attr 调整图像大小，将这些标签放在那里通常是个好主意.

【参考方案1】：

您可以使用 !important 覆盖：

.productTable img 
  border: 0 none;
  width:192px !important;
  height:250px!important;

有关示例，请参阅 http://jsfiddle.net/GDVXw/。

只是为了说明，我在此处将图像拉伸了一大堆，以便您可以更清楚地看到覆盖有效：http://jsfiddle.net/GDVXw/1/。

【讨论】：

是的，我刚刚了解了 jsfiddle，因此产生了一些很棒的东西。不幸的是，我下载并注意到您拉伸的图像最初较小，因此放大时会出现像素化。 godaddy 网站上的同样问题——我上传后他们将其调整为更小的尺寸，然后当它在代码中调用并通过我的 css 运行时，它会放大，但它是像素化的。我很确定这就是正在发生的事情。

这正是正在发生的事情。他们可能正在使用服务器端技术来调整图像大小。在这种情况下，您无能为力。您可能想查看 WordPress 中的购物车插件，如果这是一个破坏者，或者其他您喜欢并熟悉的 CMS :)。

这很有趣，即使没有！important，您的示例也能正常工作。但据我所知，这段代码根本不能工作，因为内联样式总是覆盖外部和内部 css 样式。您是否直接在浏览器中测试过您的代码？

我还没有在 jsfiddle 之外测试过。 !important 将覆盖内联样式，但现在我想起来了，我想我应该知道 CSS 宽度将覆盖 HTML 属性中设置的图像宽度。我认为这是我自己的知识差距！

哈，我很高兴我们能从这个中学习。我曾希望我们能在它被转换到服务器端之前捕获它，因为图像在整个站点中以不同的位置和不同的大小使用的方式，就好像它们是在运行中转换的一样。没有骰子。 @Lee 也感谢您解释为什么即使在服务器端转换之后他们也会添加 html 大小。我真的很感谢所有的帮助。