使用CSS放img属性答案

【问题标题】：Use CSS to put img attributes使用CSS放img属性
【发布时间】：2013-08-08 07:37:46
【问题描述】：

我可以使用 CSS 编程来放置我的 img 标签的属性吗？

<span><img class="img-dollar"></img></span> 

<span><img class="img-royalty"></img></span>

我想放 src 来获取图像并放高度和宽度来缩小它。我该如何实现？

【问题讨论】：

不能设置src，但是可以设置背景和宽度

标签： html css

【解决方案1】：

答案是否。你不能在css的帮助下操作html标签。为此使用 javascript。
CSS 仅用于操作样式属性。

要使用 css 更改高度和宽度属性，您可以执行以下操作

.img-dollar
{
   height:100px;
   width: 100px
}

【讨论】：

我知道这意味着使用背景不会使我的图像使用高度和宽度缩小
如果你想改变高度和宽度，那么你可以使用 css 来做到这一点。查看更新
其实是可以的，看我的回答，还有这个之前的问题stackoverflow.com/questions/2182716/…

【解决方案2】：

您可以使用 css 设置图像的大小，例如

img{
 width: 200px;
 height: 200px;
}

如果你有 div 包装器，你可以让图像占据该 div 的大小，例如

.wrapper{
     width: 200px;
     height: 200px;
}

.wrapper img{
    width: 100%;
    height: auto;
}

您可以使用图像作为背景来伪造 src，例如

.img{
   width: 200px;
   height: 200px;
   background: /images/image.gif 
   background-size: 200px 200px /* CSS3 */
}

您可以在此处了解更多关于背景图片大小的信息http://www.css3.info/preview/background-size/

【讨论】：

【解决方案3】：

您不能在 CSS 中更改属性，只能根据属性创建规则。

在您的情况下，您可以使用 CSS content 属性将 URL 设置为图像或内联 Base64 编码图像作为某些元素的内容。

例如：

HTML：

<span class="img-dollar"></span>
<span class="img-royalty"></span>

CSS：

span.img-dollar:before {
    content: url(images/dollar.png);
}
span.img-royalty:before {
    content: url(images/royalty.png);
}

这会将图像放入您的<span>。

【讨论】：

我尝试使用添加宽度和高度的内容，但没有缩小我的图像。
好一个。请提供来自 MDN developer.mozilla.org/en-US/docs/Web/CSS/content 而不是 w3school 的参考链接。
@Mr_Green 是的，谢谢。您的 MDN 链接更详细，已添加。

【解决方案4】：

不能设置src，而是使用背景来达到类似的效果

img-dollar{
    width:5px;
    height:5px;
    background:url(dollar.png);

}

【讨论】：

澄清一下这个设置我的图片是否会缩小？
它将是 5 x 5。在较新的浏览器中，它会缩放。你可以使用 background-size: 确保包含

【解决方案5】：

是和否。

您不能使用 css 添加 src 属性。但是，您可以使用 Javascript。

一个简单的例子：

$("img.imgNav").hover(function() {
    var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
    $(this).attr("src", src);
},
function() {
    var src = $(this).attr("src").replace("over", "");
    $(this).attr("src", src);
});

您可以使用 css 设置背景颜色和宽度/高度的样式。

img
{
    background-color: #222;
    width: 200px;
    height: 100px;
}

例如。

【讨论】：

【解决方案6】：

你可以给它一个带有或高度的集合，然后使用background:url();

或者，使用 JQuery，您可以使用 $('img-dollar').attr('src', 'image.jpg');

或者，使用纯 javascript，您可以使用：

document.getElementById('img-dollar').setAttribute("src", "image.png");

【讨论】：

【解决方案7】：

要更改 html 元素的任何属性，您需要使用 javascript 或 jQuery。

您可以将 jQuery 中的图像源更改为

$(document).ready(function(){
   $('.img-dollar').attr('src','imgpath/imagename.png');
});

和类似的代码来改变其他属性

【讨论】：

【解决方案8】：

这里我通过css直接设置图片的内容和大小：

http://jsfiddle.net/nQxje/

.img-dollar{
    content: url('http://woodgears.ca/box_joint/tiny_box_scale.jpg');
    height: 100px;
    width: 100px;
}

希望这对你有用。

【讨论】：