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;
}

Answer 2

CSS属性背景：封面可以帮到你！

html { 
 background: url(images/bg.jpg) no-repeat center center fixed; 
 background-size: cover;
}

封面会将你的背景扩展到全屏。

Answer 3

您必须为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;
}

Answer 4

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;
}

链接到CSS-Tricks以获得源代码和原始代码：https://css-tricks.com/perfect-full-page-background-image/

Answer 5

您还记得链接到样式表吗？我刚遇到这个问题，然后我意识到我忘了链接到CSS和 face-palm 。

无法使用CSS调整图像大小

5 个答案: