如何在 CSS 中使图像随着浏览器窗口的变化自动调整大小？

使用 CSS 根据浏览器大小自动调整图像大小

问题：我希望在调整浏览器大小时自动调整图像大小窗户。但是，下面的代码不起作用：

HTML:

<code class="html"><img src="/static/imghwm/default1.png" data-src="img/icon_contact.png" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="img/icon_links.png" class="lazy" alt=""></code>

CSS:

<code class="css">img {
    max-width: 100%;
    height: auto;
}</code>

答案： 要随浏览器大小调整来启用图像大小调整，请将以下属性添加到 CSS 中：

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* for IE8 */
}</code>

这可确保图像按比例缩放，并在调整浏览器窗口大小时自动调整到可用空间.

附加说明：

max-width: 100% 和 height: auto 的组合允许图像扩展到其最大宽度而不超过父元素的宽度，而保持它们的纵横比。 width: auto9 hack 专门针对 IE8，否则在渲染图像时会忽略最大宽度。

因此，使用 添加的任何图像都会被忽略。标签将是“灵活的”，根据浏览器大小的变化调整大小。

示例：

请参阅以下 JSFiddle 示例进行工作演示：[JSFiddle 链接]

此代码不需要 JavaScript，并且与最新版本的 Chrome、Firefox 和 IE 兼容。

以上是如何在 CSS 中使图像随着浏览器窗口的变化自动调整大小？的详细内容。更多信息请关注PHP中文网其他相关文章！