Use CSS to put img attributes

Question

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

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

u can't set the src, but you can set the background and width — SoWhat, Aug 08 '13 at 07:38

Sachin · Accepted Answer · 2013-08-08T07:51:21.553

7

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.

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

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

edited Aug 08 '13 at 07:51

answered Aug 08 '13 at 07:39

Sachin

40,216
7
90
102

I see which means using background will not make my image scale down using height and width – Drixson Oseña Aug 08 '13 at 07:47
if you want to change the height and width then you can do this by using css. see the update – Sachin Aug 08 '13 at 07:51
Actually it is possible, see my answer, and this previous question http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css?rq=1 – ericjbasti Aug 08 '13 at 20:11

score 3 · Answer 2 · answered Aug 08 '13 at 07:54

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

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

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

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

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

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

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

keaukraine · Answer 3 · 2013-08-08T07:51:22.240

2

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

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

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

For example:

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

This will put image into your <span>.

edited Aug 08 '13 at 07:51

answered Aug 08 '13 at 07:43

keaukraine

5,315
29
54

I tried using content adding an width and height , doesnt scale down my image. – Drixson Oseña Aug 08 '13 at 07:48
2

Good one. please give refer link from MDN https://developer.mozilla.org/en-US/docs/Web/CSS/content instead of w3school. – Mr_Green Aug 08 '13 at 07:48
@Mr_Green Yep thanks. Your link to MDN is more detailed, added it. – keaukraine Aug 08 '13 at 07:52

score 1 · Answer 4 · answered Aug 08 '13 at 07:40

1

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

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

}

answered Aug 08 '13 at 07:40

SoWhat

5,564
2
28
59

Clarification with this setup will my image will scale down or not? – Drixson Oseña Aug 08 '13 at 07:45
it will be of 5 by 5. In newer browser, it will scale. u can use background-size: contain to be sure – SoWhat Aug 08 '13 at 07:54

score 0 · Answer 5 · answered Aug 08 '13 at 07:42

Yes and No.

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

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.

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

for example.

score 0 · Answer 6 · answered Aug 08 '13 at 07:42

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

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

Or, using pure javascript, you could use:

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

score 0 · Answer 7 · answered Aug 08 '13 at 07:46

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

you can change image source in jQuery as

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

and similar code to change other attributes

score 0 · Answer 8 · answered Aug 08 '13 at 16:54

0

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

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.

answered Aug 08 '13 at 16:54

ericjbasti

2,085
17
19

Use CSS to put img attributes

8 Answers8