html - 使用CSS放img属性

Question

我可以使用 CSS 编程来放置我的 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 中的属性，只能基于属性创建规则。

在您的情况下，您可以使用 CSScontent属性将 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。

一个简单的例子：

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

你可以给它一个 set with or height 然后使用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;
}

希望这对你有用。