如何对我的网站进行编码，以便我的 100% 宽度图像根据屏幕分辨率的变化调整大小？

Posted 2023-05-08

【中文标题】如何对我的网站进行编码，以便我的 100% 宽度图像根据屏幕分辨率的变化调整大小？

【英文标题】：How do I code my website so that my 100% width images adjust size according to screen resolution changing?

【发布时间】：2018-09-05 14:04:36

【问题描述】：

如何对我的网站进行编码，以便我的 100% 宽度图像根据不同的屏幕分辨率调整大小？例如1280 x 720。

Here 是指向我主页的链接，其中包含需要根据屏幕分辨率调整大小的图像。查看第 119 到 123 行的图像代码。

【参考方案1】：

您使用 css 中的 img 在图像上放置了 700 像素以上的高度。在 css 中添加另一个类：

.full-width-img
    width:100%;
    height:auto;
    display:block;
    

将 class="full-width-img" 添加到您想要 100% 宽度的图片中。

编辑 从 img 标记中删除 width qnd height。因为现在他们是：

<img src="images3/motoxmaxres.jpg" class="full-width-img"   >

虽然应该是

<img src="images3/motoxmaxres.jpg" class="full-width-img" >

【讨论】：

嗨 Sparky。我已经编写了所有“全角 img”html 代码和 CSS 代码，当我将分辨率调整为较低的分辨率时，图像仍然没有调整大小。还有什么建议吗？

您的图片都有自己的尺寸。请删除它们并使用 css 格式化。检查我的帖子，我编辑了