网页HTML 5图片自适应屏幕 img等比例缩放大小代码

网页HTML 5图片自适应屏幕 img等比例缩放大小代码

CSS image高度和宽度自适应代码
在html中插入图像：

如果你希望图像自适应屏幕的小，而不是在宽度和高度上保持固定不变。

可以将以下代码，添加到WordPress主题的 style.css 文件中 ▼

/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto; width: auto; }

1. img { max-width: 100%; height: auto; width: auto; width: auto; }

复制代码

此处声明max-width最大宽度规则

以确保所有图像最大100％显示（即它们只能显示为本身图像那么大）。
此时，如果包含图像的元素（例如，包含图像的主体或div）小于图像的固有宽度，则将缩放图像以占满最大的可用空间。
width:auto;表示自动宽度的意思

\9 是hack css 的一种写法。

这种方式将“\9”添加到普通的css代码中，只有IE浏览器可以识别它，其他浏览器会忽略这个语句。
这将实现浏览器差异化，能够实现兼容的浏览器的目的。
为什么不使用宽度：100％？
要实现图像的自动缩放，还可以使用更常用的宽度属性，例如width：100％。

但是，此规则不适用于此处。

因为此规则将使其显示为与其容器一样宽。
在容器比图片宽得多的情况下，图片将被不必要地拉伸。