html - 用 CSS 覆盖 HTML img

标签 html css image html-table

<分区>

我的 jpeg 是它以前的像素化肥胖外壳...是否有可能用 css 样式表实际覆盖 html img 高度/宽度代码,而不是仅仅拉伸(stretch)已经调整过的图像?我问的原因是客户让我使用 godaddy 的快速购物车(邪恶)。它生成的代码会更改 html 中图像的大小。 Godaddy 只允许更改 css,这就是我至少设法将图像拉伸(stretch)回原始大小的方式。不幸的是,尽管我已经编写了 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 width="122" height="160" alt="Logo" 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>

最佳答案

您可以使用 !important 覆盖:

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

参见 http://jsfiddle.net/GDVXw/举个例子。

只是为了说明,我在这里将图像拉伸(stretch)了很多,以便您可以更清楚地看到覆盖有效:http://jsfiddle.net/GDVXw/1/ .

关于html - 用 CSS 覆盖 HTML img,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7006193/

相关文章:

html - 在这种情况下如何订购 z-index

html - 如何在 flexbox 容器中放置两个 <div>?

javascript - 淡入淡出背景图像

c# - 如何使用 DirectShow 过滤器将图像序列转换为视频?

html - <按钮> 背景图片

android - 下载后从谷歌照片库中检索图像

html - CSS - 自动调整大小容器中的中心标题背景图像,自动调整大小

html - 将固定元素定位在具有相同父宽度的父 div 底部

html - 如何使用 powershell 将 HTML 表转换为具有相同结构的 CSV 文件

jquery - 将 jQuery nestedSortable 元素(正在拖动)限制在容器内?