如何使用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：

width: 100%;

这将使其保持成比例并将其大小设置为其容器的宽度。

Answer 3

尝试将width="800"添加到<img>标记中。然而，这是“丑陋”的修复。使用某些照片编辑程序将实际图像调整到合适的宽度会更好。这样可以节省带宽并使用户体验更好。

Answer 4

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%;

Answer 5

将宽度添加为百分比值，因为它将帮助您使用所有分辨率，最大宽度和最小宽度可以为您提供帮助保持图片大小在手机上太小或在桌面上太大。

Monad

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