如何使 img 标签中的照片大小合适，以适应屏幕的比例？答案

【问题标题】：How to make photos properly sized in img tag to fit proportional to the screen?如何使 img 标签中的照片大小合适，以适应屏幕的比例？
【发布时间】：2011-06-06 19:02:25
【问题描述】：

我有这个照片页面：

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

如您所见，图片比屏幕大得多。有没有办法缩小照片的大小以保持其长宽比例，同时又能很好地适应页面？

谢谢！

【问题讨论】：

标签： html css stylesheet

【解决方案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" />

【讨论】：

【解决方案2】：

试试这个 CSS：

width: 100%;

这将使其保持比例并将其大小调整为其容器的宽度。

【讨论】：

谢谢 - 将样式放在 img 标签或周围的
标签中是正确的方法吗？

【解决方案3】：

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

【讨论】：

【解决方案4】：

为您的图像容器指定一个百分比宽度，这样当屏幕调整大小或用户正在查看较小的显示器时，容器将进行调整。接下来保持图像宽度/高度比正确使用在图像标签上的 css 下方。

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

【讨论】：

尝试在您的答案中添加更多细节，以解释这是如何解决问题的。

【解决方案5】：

将 width 添加为百分比值，因为它可以帮助您处理所有分辨率，max-width 和 min-width 可以帮助您保持图片的尺寸在手机上过小或在桌面上过大。

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="">

【讨论】：