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

【问题标题】：Responsive imagery inside fixed height/width container固定高度/宽度容器内的响应式图像
【发布时间】：2018-10-02 18:11:15
【问题描述】：

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

谢谢！

.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>

【问题讨论】：

当然，由于300px 的定义高度，它们会被压扁。您有多种选择，您可以保留它并添加object-fit: cover，但这会在需要时裁剪它们，或者您可以让它在没有定义高度的情况下自然“运行”，使用display: block; width: 100%，当然会也保持精确的比例，无需裁剪。
谢谢！效果很好！

标签： html css responsive-design responsive-images

【解决方案1】：

像这样？

Codepen

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

【讨论】：

有什么办法可以拉伸这些图像，使其更宽？感谢您的回复！
使用大图 :)

【解决方案2】：

你给图像一个高度属性和一个宽度属性。这样，您的图像将缩放并且分辨率将发生变化。

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

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

【讨论】：

感谢您的回复！我已经尝试编辑这个，但仍然没有运气:(我是开发新手，抱歉！

【解决方案3】：

已回答问题，需要移除图像上的固定高度并制作一些流动的模组，如宽度 100% 等！

【讨论】：