如何确保图像是流畅的并且会调整大小？答案

【问题标题】：How do I ensure that an image is fluid and will resize?如何确保图像是流畅的并且会调整大小？
【发布时间】：2013-04-10 23:37:40
【问题描述】：

我正在尝试使用 CSS 来确保如果屏幕低于特定分辨率或窗口低于特定大小，我页面上的图像会调整大小。我已阅读使用 {max-width:100%}，已将其合并到我的代码中，但图像根本没有调整大小。图像宽 500 像素。

谢谢！

CSS 和 HTML：

.left{
float:left;
width:600px;
}

.right{
float:right;
width:400px;
}

#logoimage{
width: 100%;
margin: 50px auto;
max-width: 100%;
}

#navbar{
text-align: center;
font-family: 'Special Elite', cursive;
color:white;
font-size: 80px;
font-style: bold;
display: block;
margin: 60px auto;

}

<body>
<div class="left">
<div id="logo">
<img src="/pictures/logo.png">
</div>
</div>

【问题讨论】：

标签： image fluid-layout

【解决方案1】：

您的 ID logoimage 的 CSS 未应用于任何内容。您有一个 img 元素，但没有指定 ID。将<img src="/pictures/logo.png">更改为<img id="logoimage" src="/pictures/logo.png" />使其生效。

此外，将 width 设置为 100% 并将 max-width 设置为 100% 是没有意义的。这是多余的。将宽度设置为 100% 以确保元素为 100% 宽度，或将 max-width 设置为 100% 以确保元素将自动宽度最大为 100 %。

【讨论】：