CODEWITHSUNDEEP
htmlcss
James
James

Reputation: 1945

max height and width increases image size

I have an image tag. I tried to set the max height and width property to 600 px. Now if the image size is less than it, it increases the image size. I only want to have the max height and width only if image is more than 600 px.

<img src="8.jpg" style="max-height: 600px;max-width:600px;/">

Upvotes: 0

Views: 355

Answers (4)

Ivin Raj
Ivin Raj

Reputation: 3429

please try This one:

One method 

<img src="8.jpg" style="max-height: 200px;max-width:200px;/">

another one method like this:

<img src="8.jpg" />

Css Code:

img{
    width:100%;
    max-width:600px;
}

Upvotes: 0

KevinKP17
KevinKP17

Reputation: 1

max-width purpose is to limit a large resolution image into specified size. so, basically max-width itsef can't force a smaller images to enlarge. i bet the images are affected by other CSS. as stated:

"The max-width property is used to set the maximum width of an element.

This prevents the value of the width property from becoming larger than max-width." - http://www.w3schools.com/cssref/pr_dim_max-width.asp

Upvotes: 0

Upperface
Upperface

Reputation: 121

For me it looks like your img-tag is affected by another css-rules which affect the width/height of your images. I would suggest to use the developer tools of your browser to check which css-rules affect your img-tags (Tutorial if needed: https://developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools).

Also in your code example above, the slash should be outside of your style-attribute, like this:

<img src="8.jpg" style="max-height: 600px;max-width:600px;" />

Upvotes: 0

deadulya
deadulya

Reputation: 706

It works proper, can you make a fiddle with wrong example?

<img src="http://www.waltereul.de/walter-eul-pictures/walter-eul_100x100_10.jpg" style="max-height: 200px;max-width:200px;/">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif" style="max-height: 200px;max-width:200px;/">

example

Upvotes: 1

Related Questions