Question

我可以使用CSS programmatic来设置我的img标签的属性吗？

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

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

我想把src放到图像中，然后放高度和宽度来缩小图像。我怎样才能实现？

Answer 1

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

要使用css更改高度和宽度属性，您可以执行类似这样的操作

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

Answer 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/

Answer 3

您无法更改CSS中的属性，只能根据属性创建规则。

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

此处提供了更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/content和此处：http://www.w3schools.com/cssref/pr_gen_content.asp

例如：

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>。

Answer 4

你不能设置src但使用背景来达到类似的效果

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

}

Answer 5

是和否。

您无法使用css添加src属性。但是你可以使用 Javascript for that。

一个简单的例子：

$("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;
}

例如。

Answer 6

你可以给它设置一个或高度然后使用background:url();

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

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

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

Answer 7

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

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

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

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

Answer 8

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

http://jsfiddle.net/nQxje/

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

希望这适合你。

使用CSS来放置img属性

8 个答案: