How to make photos properly sized in img tag to fit proportional to the screen?

I have this photo page:

http://www.comehike.com/hikes/hike_image开发者_C百科.php?hike_photo_id=106&photo_path=http://www.comehike.com/img/hiking_photos/-1_311_5/full_IMG_4612.jpg

As you can see, the picture is waaaaay bigger that the screen. Is there a way to downsize the photos to keep its proportions of length and width, but also to fit nicely on the page?

Thanks!

Add width:100% to its style.

<img src="http://www.comehike.com/img/hiking_photos/-1_311_5/full_IMG_4612.jpg" style="border: none; width: 100%;" alt="California Nature" />

Try this CSS:

width: 100%;

That will keep it proportional and size it to the width of its container.

Try adding like width="800" to the the <img> tag. However, this is the "ugly" fix. It's much better to use some photo editing program to just resize the actual image to a suitable width instead. This saves bandwidth and makes the user experience much better.

give your image container a percentage width, that way when the screen is resizing or the user is looking at smaller monitor the container will adjust. next to keep the image width/height ratio correct use below css on image tag.

max-width:100%;
max-height:100%;

Add width as a percentage value as it will help you with all resolutions, max-width, and min-width can help you with maintaining the size of the picture going too small on mobiles or going too big on the desktop.

img{
width: 50%;
max-width: 300px;
min-width: 175px;
}

<img src="http://www.comehike.com/img/hiking_photos/-1_311_5/full_IMG_4612.jpg" alt="">