为什么max-width不起作用？

Question

我有以下HTML和CSS -Code：

.afbeelding {
  clear: both;
  max-width: 95%;
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 10px;
  margin-top: 5px;
}
.afbeeldingCentreren {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.vrij {
  clear: both;
}

<div name="bericht" id="bericht">
  <div class="vrij" />
  <div class="afbeelding afbeeldingCentreren" style="width:1944px;">
    <img src="http://placehold.it/2000x2000" />
    <div class="bijschrift" style="width:100%">
    </div>
  </div>
  The message
</div>

目的是图像无法使页面比屏幕更宽。然而，它不起作用。我不明白为什么。有人可以帮助我。我希望这是足够的信息。抱歉荷兰班级名称。

Answer 1

将以下内容添加到CSS中。

.afbeelding img {
  width: 100%;
  height: auto;
  max-width: 1440px;
}

对于max-width值，请输入图像的宽度。这样可以防止在大屏幕上观看时草图和像素化。

Answer 2

您应该设置图像的最大宽度，因此您的html将是：

<img src='yaddayadda' class='notBig'>...

和你的css：

.notBig {
  max-width: 95%;
}