CODEWITHSUNDEEP
htmlcssimage
Bryan
Bryan

Reputation: 8697

Unable to resize image using CSS

I'm trying to resize my image using my CSS as i have to code different css for different media query. So this is the various methods i found on this stackoverflow and tried to resize my image on CSS.

First i tried inserting div.

<div id="images"><img src="image/s1.jpg" name="slide"></div>

CSS

#images{
width:100%;
height:150%;
}

But it didn't change.

Secondly, i used class

<img src="image/s1.jpg" name="slide" class="images">

CSS is the same as the top

#images{
width:100%;
height:150%;
}

The other CSS of mine on the same page works fine just that it doesn't work for images. Is there any way i have left out to resize my image with the CSS?

Upvotes: 1

Views: 6965

Answers (9)

CaptainKnee
CaptainKnee

Reputation: 139

Try making a background-image on div this also. It's useful.

<div class='images'></div>

css code:

.images{
width:100px;height:100px;
background-image:url('yourimage.jpg');background-size:100% 100%;
}

Resize it as you wish (:

Upvotes: 0

Green Wizard
Green Wizard

Reputation: 3667

In the first case of css

#images{
    width:100%;
    height:100%;
}

you are just adjusting the size of the div in which the image is present.

Note that you have used an id #images here in first case

In the second case of css you are adjusting the size of the image but using a class "images" instead of id

so either

#images img{
  width:100%;height:150%;
}

for the first case would do.

or

.images{
      width:100%;height:150%;
    }

for the second case.

Upvotes: 0

Kevan Robinson
Kevan Robinson

Reputation: 46

In the first example, you're just resizing the div. In the second example, the img element has a class attribute, but the CSS contains an id selector. Either assign the image an id attribute with value "images" (assuming you only have one image you want to style),

<img src="image/s1.jpg" name="slide" id="images">

or alter the CSS to use a class selector rather than an id selector (for styling many images):

.images {
    width:100%;
    height:150%;
}

Upvotes: 0

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

HTML

  <div>
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSqqEKVYrUqwTWgHCUeV26xUokzezlKVjlf6S9tV0fIvgMF_oR4"
name="slide" id="images" />
</div>

CSS

#images{
width:100%;
height:150%;
}

DEMO HERE..!!

Upvotes: 0

Krish R
Krish R

Reputation: 22721

Use .images class selector, <img src="image/s1.jpg" name="slide" class="images">

.images{
  width:100%;
  height:150%;
 }

instead of 

#images{
  width:100%;
  height:150%;
}

Upvotes: 1

di3sel
di3sel

Reputation: 2012

Use For the first case use:

#images > img {
  width:100%;
  height:150%;
}

For the second case use:

img.images {
  width:100%;
  height:150%;
}

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157404

You are targeting the container element, not the img tag, and hence your img won't resize, so use this

#images > img {
   /* Styles */
}

Secondly, i used class but you are still using #images which is an id selector so you need .images . which is a class selector and not # .

.images {
   /* Styles */
}

Upvotes: 4

NoobEditor
NoobEditor

Reputation: 15921

This would work

#images > img {
    width:100%;
    height:150%;
}

working demo

Whats happening : you have assigned the css to the div tag, its should be for the img tag of the div.So #images > img would assign it to the img tag of the div!!

Upvotes: 1

sbking
sbking

Reputation: 7680

Try this:

#images img {
  width:100%;
  height:150%;
}

Upvotes: 0

Related Questions