Question

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

谢谢！

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>

Answer 1

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

此外，没有必要将width设置为100％AND max-width至100％。这是多余的。将宽度设置为100％以确保元素为100％宽度，或将max-width设置为100％，确保元素自动宽度最多最多100 ％。

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

1 个答案: