How can the width/height of an image be controlled via external stylesheet instead of using attributes?

Question

<div id="leftContent">
<div style="text-align: center">
<img src="S.jpg">
</div>
</div>

Now i have a stylesheet 'main.css' linked with this page... since i haven't set the width/height of img in the code itself I wanna set that via styling in main.css. How can I do that..?

P.S.: I don't have access to HTML file of the page.. I only have the access to the style sheet.

#leftContent div img {height:XX;width:XX;} , see to learn and how to use CSS selector. It's the 101 tool to build your style sheets :) http://www.w3.org/TR/CSS2/cascade.html#cascade — G-Cyrillus, Jul 09 '13 at 10:23

Fabrizio Calderan · Answer 1 · 2016-03-03T15:11:09.007

4

use width and height in css

#leftContent img {
   width: ... ;
   height: ... ;
}

you may also create a specific css rule for each different image (no matter about parent container) if you are using them several times across the site with different templates, e.g.

img[src="S.jpg"] {
   width: ... ;
   height: ... ;
}

edited Mar 03 '16 at 15:11

answered Jul 09 '13 at 10:22

Fabrizio Calderan

120,726
26
164
177

I can't imagine, with the given code, that you have other images there (that's why I used a not too specific selector): anyway see the second part of my answer: with the attribute selector you can assign a specific size to your `S.jpg` even if you move it elsewhere. – Fabrizio Calderan Jul 09 '13 at 10:30
Second one will not be useful in case of a CMS where the src of the img gets changed per reload randomly e.g. Claroline. – Sahil Jul 09 '13 at 14:54
of course, but for a generic question with no costraints you will get a generic answer unable to deal with all edge cases :) – Fabrizio Calderan Jul 09 '13 at 15:08

score 3 · Accepted Answer · answered Jul 09 '13 at 10:22

3

Add this in your external stylesheet.

#leftContent div img{your attributes}

answered Jul 09 '13 at 10:22

Nitesh

15,425
4
48
60

Michael Unterthurner · Answer 3 · 2013-07-09T10:36:30.527

1

try this: if you want to select a specific img

#leftContent div img:nth-child(2 or 3 or 4 or) {  //here number of the img.. 2 for the 2.
   width: yourValue;
   height: yourValue;
}

and else

#leftContent div img { 
   width: yourValue;
   height: yourValue;
}

edited Jul 09 '13 at 10:36

answered Jul 09 '13 at 10:24

Michael Unterthurner

921
1
10
25

It gets applied to all the images in #leftContent... anyways thnks – Sahil Jul 09 '13 at 10:30

Falguni Panchal · Answer 4 · 2013-07-09T10:38:11.753

1

try this

http://jsfiddle.net/UbN7M/2/

CSS

#leftContent > div > img{
    border:1px solid blue;
    width:200px;
    height:200px;


}

edited Jul 09 '13 at 10:38

answered Jul 09 '13 at 10:25

Falguni Panchal

8,873
3
27
33

Its working even without these '>' ...whats the purpose of '>' ?? – Sahil Jul 09 '13 at 14:55
Look at it :) -> http://stackoverflow.com/questions/3225891/what-does-mean-in-css-rules – Michael Unterthurner Jul 10 '13 at 06:38

How can the width/height of an image be controlled via external stylesheet instead of using attributes?

4 Answers4