html - 无法使用 CSS 调整图像大小

Question

我已经尝试了在我能找到的所有网站上找到的所有答案，但仍然无法使用 CSS 正确调整图像的大小。我把它放在一个 div 中，并尝试调整其中一个的大小并调整两者的大小。我正在尝试使图像(在我的导航栏下方)适合页面(意思是:与页面一样宽，以及相对高度)。

<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>

第一次尝试:

.myImage{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

第二次尝试:

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

第三次尝试:

<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

#myImage{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

Answer 1

如果您的图像小于屏幕，它将使用图像宽度。如果它更大，它使用最大宽度。因此，假设您的图像小于显示器，您想将“最大宽度”更改为“宽度”以增加图像尺寸。

<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

#myImage{
    width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}