html - 调整图像以适应屏幕

Question

我制作了一个图片库，由两行组成，每行都有 TreeMap 片。我已经让我的网站响应，但由于某种原因，图像不会根据屏幕调整大小/调整。我附上了图片，可以看出图片不适应屏幕。 Screen shot of site

.image3 {
  height: 300px;
  width: 370px;
  border: 5px solid;
  color: grey;
}

<div class="wrapper">
  <div class="row">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3">
    <img src="img/static1.squarespace2.jpg" alt="Iphone" class="image3">
    <img src="img/apple-iphone-8.jpg" alt="Iphone" class="image3"> 
  </div>
  <div class="row">
    <img src="img/iphone-8-concept.jpg" alt="Iphone" class="image3">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3">
  </div>
</div>

Answer 1

图像不会调整大小，因为您给了它们绝对宽度。如果您为元素提供 100% 的 max-width 和 max-height，它应该是响应式的。所以像这样:

.image3 {
  max-height: 100%;
  max-width: 100%;
  border-style: solid;
  border-width: 5px;
  color: grey;
}

<div class="row">
  <div class="wrapper">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" />
    <img src="img/static1.squarespace2.jpg" alt="Iphone" class="image3" />
    <img src="img/apple-iphone-8.jpg" alt="Iphone" class="image3" /> 
  </div>


  <div class="row">

    <img src="img/iphone-8-concept.jpg" alt="Iphone" class="image3" />
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" />
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" />

  </div>

像素对屏幕尺寸没有反应

注意:请参阅下方 MarioZ 的回复