我希望将图片放入可以缩放的网站中，但仍然可以正常工作，但是我的图片巨大，我似乎无法适应。我试图对图片本身及其周围的div的包装div（此处称为“ innpakning”）进行限制。似乎没有任何作用。即使我可以使用它，也无法达到目的，因为我希望它可以扩展到网站窗口。如何使其适合窗户？
我尝试使用
max-width: 100%;
max-height: 100%;
并且它固定了图像，但没有固定网站其余部分的间距。我最终在.overskrift和.innhold之间有一个巨大的差距。
<body>
<div class="innpakning">
<div class="overskrift">
<p id="text"> Hvaler </p>
</div>
<div class="innhold">
<div class="meny">
<div class="alt"><a href="minnettside.html"> Info</a> </div>
<div class="alt"><a href="minnettside2.html">Bilde </a> </div>
<div class="alt"> <a href="minnettside3.html">Lyd </a> </div>
<div class="alt"> <a href="minnettside4.html">Video</a> </div>
</div>
<div class="faktisk">
<img src="css/media/hval.jpg" alt="">
</div>
</div>
</div>
</body>
innpakning{
margin: 20px;
padding-left: 10px;
padding-right: 10px;
display: grid;
grid-template-rows: 1fr 1fr;
}
.overskrift{
background-color: none;
color: black;
font-weight: bold;
}
.innhold {
background-color: #29648A;
}
.meny {
background-color: none;
display: grid;
margin: auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
a {
text-decoration: none;
margin-left: 25px;
color: white;
}
.alt {
color: #FAFAFA;
text-decoration: none;
background-color: #25274D;
color: white;
padding: 10px;
margin: 2px;
}
.alt:hover {
background-color: #464866;
}
img {
margin-left: auto;
border: solid black;
max-width: 100%;
max-height: 100%;
}
.faktisk {
color: #DEDEDE;
padding: 15px;
margin: auto;
display: grid;
grid-template-columns: 1fr
}
@import url('https://fonts.googleapis.com/css?family=Asset');
#text {
font-family: Asset, cursive;
text-align: center;
font-size: 35px;
color: rgba(245, 246, 255, 0.96);
background-color: rgba(168, 168, 168, 0.11);
text-shadow: rgba(0, 0, 0, 0.99) 2px 2px 2px;
}
我建议您使用CSS单位类型vw设置图像的最大宽度，如下所示：
img {
margin-left: auto;
border: solid black;
max-height: 100%;
max-width: 100vw;
height auto;
}
阅读有关MDN的更多信息：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages