automatic size of images

[astigiando]

Dear all,
I need to have images auomatically sized at 48% of the width of the container. I used this on my CSS


img.sidepic {
border-style: double;
border-color: #1A3491;
float: left;
width: 48%;
margin-right: 2px;
}

the problem is that sometime the images are not sized proportionally in height and thus appear as deformed.
someone can help me?
you can see this on www.mccollection.it

[djr33]

Why not just add height: 48%;?
If you want width and height equal, that seems fine to me. I'm not sure about the specifics of using CSS to size images proportionally, but it might vary by browser, etc., so specifying both won't hurt anything.

[astigiando]

already tried,
height= 48% size the image at 48% of the container and not 48% of the image therefore the deformation is also higher...
I need the image being large 48% of the container and height remain proportional

[forum_amnesiac]

I thought that normally if you declared a percentage width or height then the browser scales the image proportionately.

You only need to declare one these dimensions, try height="48%", without the width declaration, and see what that does

[astigiando]

thank you very much but my problem is that, declaring only the width, some of the images are not scaled proportionally (especially the ones longer than larger appear as flattened)
may you help me?

[forum_amnesiac]

Perhaps your problem is not in your CSS but in your HTML.

You are using CSS to change the width of the image to be 48% of the original.

I see however that you are also setting the height and width attributes of the <img> tag. Try not setting these attributes, or ensure that the values you enter are proportional.

[astigiando]

ciao,
I checked: my HTML in local has not width and height on image, just the class="sidepic".
I'm using sharepoint designer to publish the web-site.
I don't understand why on the HTML code on the web there are width and height ...