如何使用 CSS 使图像随浏览器窗口自动调整大小？
- Linda Hamilton原创
- 2024-10-26 04:09:02407浏览
使用 CSS 浏览器大小自动调整图像大小
问题：
您的图像不会自动调整当您调整浏览器窗口大小时也调整大小。您已尝试以下代码，但不起作用：
HTML:
<code class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="icons">
<div id="contact">
<img src="img/icon_contact.png" alt="" />
</div>
<img src="img/icon_links.png" alt="" />
</div>
</body>
</html></code>
CSS:
<code class="css">body {
font-family: Arial;
font-size: 11px;
color: #ffffff;
background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
background-size: cover;
}
#icons {
position: absolute;
bottom: 22%;
right: 8%;
width: 400px;
height: 80px;
z-index: 8;
transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
}
#contact {
float: left;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}</code>
解决方案：
要使图像灵活，请添加以下 CSS 属性：
<code class="css">img {
max-width: 100%;
height: auto;
width: auto; /* for IE8 compatibility */
}</code>
通过将 max-width 设置为 100%，图像将永远不会超过其容器的宽度。将高度设置为自动允许图像在调整大小时保持其纵横比。 width: auto9 覆盖对于 IE8 兼容性是必需的。
设置这些属性后，您使用 img 标签添加的任何图像都将自动调整大小以适合浏览器窗口的大小。
JSFiddle 演示：
您可以在此 JSFiddle 中看到此解决方案的现场演示：
https://jsfiddle.net/mjc5ue0z/
此解决方案不需要 JavaScript。它适用于最新版本的 Chrome、Firefox 和 IE（经过测试的版本）。
以上是如何使用 CSS 使图像随浏览器窗口自动调整大小？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn