使用CSS设置img属性

Question

使用CSS设置img属性

3

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

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

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

我想通过添加src属性来获取图片，并通过设置高度和宽度将其缩小。我该怎么做？

- Drixson Oseña

你不能设置src，但是你可以设置背景和宽度。 - SoWhat

8个回答

3

您可以使用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/。

- matpol

2

在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);
}

这将把图片放入你的中。

- keaukraine

我尝试使用添加宽度和高度的内容，但无法缩小我的图像。 - Drixson Oseña

2

好的，请提供 MDN 的参考链接 https://developer.mozilla.org/en-US/docs/Web/CSS/content 而不是 w3school。 - Mr_Green

@Mr_Green 没错，谢谢。你提供的 MDN 链接更详细，已添加。 - keaukraine

1

您不能设置src，但可以使用背景来实现类似的效果。

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

}

- SoWhat

请问在这个设置下，我的图片会被缩小吗？ - Drixson Oseña

它将是5乘5。在新版浏览器中，它将进行缩放。您可以使用background-size：contain来确保。 - SoWhat

0

可以和不可以。

你不能使用 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;
}

例如。

- Kees Sonnema

0

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

您可以在jQuery中更改图像源，如下所示：

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

以及类似的代码来更改其他属性

- Dashrath

0

这里我通过纯CSS设置图像的内容和大小：

http://jsfiddle.net/nQxje/

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

希望这对您有用。

- ericjbasti

0

你可以使用宽度或高度设置一个容器，然后使用 background:url();。

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

或者，使用纯javascript，你可以使用：document.getElementById('img-dollar').setAttribute("src", "image.png");。

- Albzi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sachin · Accepted Answer

答案是不行。你不能通过CSS来操作HTML标签。需要使用JavaScript。
CSS只能用于操作样式属性。
要使用CSS更改高度和宽度属性，可以像这样做：

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