Html 使用 CSS 放置 img 属性

Use CSS to put img attributes

提问by Drixson Ose?a

Can I use CSS programmatic to put the attributes of my img tag?

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

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

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

I want to put src to get the image and put height and width to scale it down. How can I achieve?

我想放置 src 来获取图像并放置高度和宽度来缩小它。我怎样才能实现？

回答by Sachin

The answer is No.You can't manipulate the html tags with the help of css. Use javascript for that.
CSS is only used for manipulate the style attributes.

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

To change the height and width property using css you can do something like this

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

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

回答by matpol

You can set the size of an image using css e.g.

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

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

If you have div wrapper you can make the image take up the size of that div e.g.

如果您有 div 包装器，则可以使图像占据该 div 的大小，例如

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

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

You can fake the src using an image as a background e.g.

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

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

You can find out more about background image size here http://www.css3.info/preview/background-size/

您可以在此处找到有关背景图像大小的更多信息http://www.css3.info/preview/background-size/

回答by keaukraine

You can't alter attributes in CSS, only create rules based on attributes.

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

In your case, you can use CSS contentproperty to set URL to image or inline Base64-encoded images as content of certain elements.

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

More information here: https://developer.mozilla.org/en-US/docs/Web/CSS/contentand here: http://www.w3schools.com/cssref/pr_gen_content.asp

更多信息在这里：https: //developer.mozilla.org/en-US/docs/Web/CSS/content和这里：http: //www.w3schools.com/cssref/pr_gen_content.asp

For example:

例如：

HTML:

HTML：

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

CSS:

CSS：

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

This will put image into your <span>.

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

回答by SoWhat

You can't set the src but use the background to achieve a similar effect

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

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

}

回答by Kees Sonnema

Yes and No.

是和否。

• You can't add a src attribute using css. You could however use Javascript for that.

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

a quick example:

一个简单的例子：

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

• You can style the background-color and width/height with css.

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

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

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

for example.

例如。

回答by Albzi

You could give it a set with or height then use background:url();

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

Or, using JQuery, you could use $('img-dollar').attr('src', 'image.jpg');

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

Or, using pure javascript, you could use:

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

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

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

回答by Dashrath

To change any attribute of html element you need to use javascript or jQuery .

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

you can change image source in jQuery as

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

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

and similar code to change other attributes

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

回答by ericjbasti

Here im setting the content and size of an image through straight css:

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

http://jsfiddle.net/nQxje/

http://jsfiddle.net/nQxje/

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

hope this works for you.

希望这对你有用。