html block : proportional image resize with width and mobile resize

grosloulou

hallo,

For my about, links,... page i often hesitate between smugmug links to small, large,...

in general, in a img tag, if i take a link for a smugmug large size and use only width (landscape format) or only height (portrait format) to reduce size, does img resize proportional ? otherwise i need to re-compute the other dimension according to the original ratio which is tedious.


when i look my site on my iphone 4, all images are perfectly resized except the ones i used in my html blocks like :

http://www.labrophotography.com/Buy-images

to do that, i used shared button and selected a link to a image 400px length max

do i need to add extra commands on :

    <img class="image_right" src="http://www.labrophotography.com/Galleries/Nature/Nature-and-landscapes/i-4XjfXvd/2/S/D30_8337_nx2_640-S.jpg" alt="californie" />

best regards
marc

thenickdude

Yeah, if you leave width or height set to "auto" in CSS, the browser will proportionally scale the image for you. For example, you could make your image take up no more than 40% of the page width:

.image_right {
  max-width:40%;
  height:auto;
}