Html 无法使用 CSS 调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25024627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't resize image using CSS
提问by user3486718
I've tried every answer I could find on all the sites I could find, but still haven't been able to properly resize an image using CSS. I've got it inside a div, and tried resizing either one and resizing both. I'm trying to fit the image (underneath my navigation bar) to the page (meaning: as wide as the page, and relative height).
我已经尝试了在我能找到的所有网站上找到的所有答案，但仍然无法使用 CSS 正确调整图像大小。我把它放在一个 div 中，并尝试调整其中一个的大小并调整两者的大小。我正在尝试将图像（在我的导航栏下方）适合页面（意思是：与页面一样宽，以及相对高度）。
<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>
First attempt:
第一次尝试：
.myImage{
max-width: 100%;
height: auto;
left: 0px;
right: 0px;
}
Second attempt:
第二次尝试：
#banner{
max-width: 100%;
height: auto;
left: 0px;
right: 0px;
}
Third attempt:
第三次尝试：
<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;
}
回答by Jose Magana
If your image is smaller than the screen, it will use the image width. If it is bigger, it uses max-width. So assuming your image is smaller than the display, you want to change your "max-width" to "width" to increase the image size.
如果您的图像小于屏幕，它将使用图像宽度。如果它更大，它使用最大宽度。因此，假设您的图像小于显示器，您希望将“最大宽度”更改为“宽度”以增加图像尺寸。
<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;
}
回答by Milkmannetje
The CSS property background:cover will help you!
CSS 属性 background:cover 会帮助你！
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
Cover will extend your background to full screen.
封面将您的背景扩展到全屏。
回答by Tyler Hurst
CSS-Tricks has the best solution for this that I could find
CSS-Tricks 有我能找到的最好的解决方案
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}Link to CSS-Tricks for the source and original code: https://css-tricks.com/perfect-full-page-background-image/
源代码和原始代码的 CSS-Tricks 链接：https: //css-tricks.com/perfect-full-page-background-image/
回答by Michelle
You have to give the id banner a specific width that is less than 100%. You don't need a height, it already is automatic. You have to target the image inside the banner and not the class added to the image. So it should look like this:
您必须为 id 横幅指定小于 100% 的特定宽度。你不需要高度，它已经是自动的。您必须定位横幅内的图像，而不是添加到图像的类。所以它应该是这样的：
<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>
#banner{
width: 60%;
left: 0px;
right: 0px;
}
#banner img{
width: 100%;
left: 0px;
right: 0px;
}
