Question

目前，当我将它们放入固定高度的容器（300px大屏幕）时，我遇到了一些图像质量下降的问题。当我调整窗口大小时，它们会被压扁，然后它会触及我制作的媒体查询，但仍然看起来不太好。我在网上搜索过但找不到我要找的东西。有人能告诉我哪里出错了吗？我只是希望他们保持质量并调整大小以适应屏幕。

谢谢！

.an-image {
  padding: 10px;
  text-align: center;
}

.an-image:nth-child(2n) {
  background: #ddd;
}

@media screen and (min-width: 700px) {
  .image-gallery {
    background: transparent;
  }
  .image-gallery .content {
    display: flex;
    text-align: left;
    justify-content: center;
    background: none;
  }
  .image-gallery .container-content {
    max-width: 1000px;
  }
  .an-image {
    flex: 33%;
    /* assumes three images */
    padding: 0;
    max-height: 300px;
    height: auto;
    width: 100%;
    background: none;
    border: 1px solid red;
    /* just so you can see what's happening */
    margin-right: 10px;
  }
  .an-image:last-child {
    margin-right: 0;
  }
  .an-image img {
    height: 100%;
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .an-image {
    flex: 33%;
    /* assumes three images */
    padding: 0;
    height: 20%;
    width: 100%;
    background: none;
    padding-bottom: 20px;
  }
  .an-image img {
    width: 100%;
    display: inline-block;
    max-height: 300px;
  }
}

<section id="images" class="image-gallery container">
  <div class="container-content">
    <h2>Image Gallery</h2>
    <div class="content">

      <div class="an-image">
        <img src="https://picsum.photos/200/300" />
      </div>
      
      <div class="an-image">
        <img src="https://picsum.photos/200/300" />
      </div>
      
      <div class="an-image">
        <img src="https://picsum.photos/200/300" />
      </div>


    </div>
</section>

Answer 1

喜欢这个吗？

Codepen

您需要在auto或width上使用属性height才能正确调整大小。看看CSS。

Answer 2

您正在为图像提供具有width属性的height属性。这样您的图像就会缩放，分辨率也会发生变化。

＆＃13;

.an-image {
  padding: 10px;
  text-align: center;
}

.an-image:nth-child(2n) {
  background: #ddd;
}

@media screen and (min-width: 700px) {
  .image-gallery {
    background: transparent;
  }
  .image-gallery .content {
    display: flex;
    text-align: left;
    justify-content: center;
    background: none;
  }
  .image-gallery .container-content {
    max-width: 1000px;
  }
  .an-image {
    flex: 33%;
    /* assumes three images */
    padding: 0;
    max-height: 300px;
    height: auto;
    width: 100%;
    background: none;
    border: 1px solid red;
    /* just so you can see what's happening */
    margin-right: 10px;
  }
  .an-image:last-child {
    margin-right: 0;
  }
  .an-image img {
    height: 100%;
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .an-image {
    flex: 33%;
    /* assumes three images */
    padding: 0;
    height: auto;
    width: 100%;
    background: none;
    max-height: auto; 
    padding-bottom: 20px;
  }
  .an-image img {
    width: 100%;
    display: inline-block;
  }
}

＆＃13;

<section id="images" class="image-gallery container">
  <div class="container-content">
    <h2>Image Gallery</h2>
    <div class="content">

      <div class="an-image">
        <img src="https://picsum.photos/200/300" />
      </div>
      
      <div class="an-image">
        <img src="https://picsum.photos/200/300" />
      </div>
      
      <div class="an-image">
        <img src="https://picsum.photos/200/300" />
      </div>


    </div>
</section>

＆＃13;

Answer 3

问题解答了，需要移除图像上的固定高度并制作宽度为100％的流动模块等！

固定高度/宽度容器内的响应图像

3 个答案: