无法使用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;
}