How to take photos corresponding to the sizes in the img tag proportional to the screen?

Question

I have this photo page:

http://www.comehike.com/hikes/hike_image.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 waaaaay image is larger than the screen. Is there a way to reduce the size of photos in order to preserve their proportions of length and width, but also fit well on the page?

Thanks!

Answer 1

Add width:100% to your 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" /> 

Answer 2

Try this CSS:

 width: 100%; 

This will maintain proportionality and size over the width of the container.

Answer 3

Try adding the width="800" tag to the <img> . However, this is an ugly fix. It is much better to use some photo editing program to simply resize the actual image to a suitable width. This saves bandwidth and significantly improves user experience.

Answer 4

give your image container a percentage width, so when the screen is resized or the user looks at a smaller monitor, the container will adjust. side by side to keep the correct use of image width / height below css on the image tag.

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