Как сделать фотографии правильного размера в теге img, чтобы они соответствовали размеру экрана?

Question

У меня есть эта страница фото:

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

Как вы можете видеть, изображение намного больше экрана. Есть ли способ уменьшить размер фотографий, чтобы сохранить пропорции длины и ширины, а также уместить на странице?

Спасибо!

Answer 1

Добавьте width:100% к своему стилю.

---

<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

дает вашему контейнеру изображения ширину в процентах, таким образом, когда размер экрана изменяется или пользователь смотрит на меньший монитор, контейнер будет корректироваться. Далее, чтобы сохранить правильное соотношение ширины и высоты изображения, используйте ниже CSS на теге изображения.

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

Answer 3

Попробуйте добавить как width="800" в тег <img>. Однако это «некрасивое» исправление. Гораздо лучше использовать некоторую программу для редактирования фотографий, чтобы просто изменить размер реального изображения до подходящей ширины. Это экономит полосу пропускания и делает работу с пользователем намного лучше.

Answer 4

Попробуйте этот CSS:

width: 100%;

Это будет держать его пропорциональным и масштабировать по ширине контейнера.