Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image height and width not working?

On this post I have set the image height and width and it's clearly seen in the HTML..

[url removed]

But the browser or Wordpress is causing the image to stay same size.

I want it to be smaller?

like image 670
Mark R Avatar asked Apr 22 '12 17:04

Mark R


People also ask

How do you fix the width and height of an image?

The height and width of an image can be set using height and width attribute. The height and width can be set in terms of pixels. The <img> height attribute is used to set the height of the image in pixels. The <img> width attribute is used to set the width of the image in pixels.

Why height attribute is not working?

If you have not set an explicit height to the containing block (and the child is not absolutely positioned), then your child element with percentage height will have nothing to go on and height will be determined by content and other properties.

Why I can't change the height of image in HTML?

There is no command for changing an image size. Image dimensions are 'properties' which can be expressed in either the HTML <img> element, as width="150" height="100" attributes in the tag; or, the CSS as style rules applying to specific images.


3 Answers

You must write

<img src="theSource" style="width:30px;height:auto;" />

Inline styling will always take precedence over CSS styling. The width and height attributes are being overridden by your stylesheet, so you need to switch to this format.

like image 85
Mageek Avatar answered Oct 09 '22 11:10

Mageek


You have a class on your CSS that is overwriting your width and height, the class reads as such:

.postItem img {
    height: auto;
    width: 450px;
}

Remove that and your width/height properties on the img tag should work.

like image 26
Andres Ilich Avatar answered Oct 09 '22 11:10

Andres Ilich


http://www.markrafferty.com/wp-content/w3tc/min/7415c412.e68ae1.css

Line 11:

.postItem img {
    height: auto;
    width: 450px;
}

You can either edit your CSS, or you can listen to Mageek and use INLINE STYLING to override the CSS styling that's happening:

<img src="theSource" style="width:30px;" />

Avoid setting both width and height, as the image itself might not be scaled proportionally. But you can set the dimensions to whatever you want, as per Mageek's example.

like image 3
maiorano84 Avatar answered Oct 09 '22 13:10

maiorano84