当 png 大小不同时，如何最好地调整图像大小？

Question

我正在使用 Foundation 为一组文本和图像进行布局。我已经从 Photoshop 导出了 png。在 Photoshop 中，图像看起来像是很好地包含在 divs 布局内的方形框中。但是，当我将它们放在该布局中时，其中一个图像在视觉上看起来比其他图像大。 Photoshop 是否以原始尺寸保存这些图像，而不是设计师在布局上调整它们的大小？让图像在页面上看起来大小相同的最佳做法是什么？

我是否要重新调整图像大小并重新保存图像并尝试重复，直到它在布局中看起来正确？我有大约四个图像。我应该给它们一个单独的类并分配一个唯一的宽度，以便它们正确显示在屏幕上吗？这样做会使图像有时显得模糊？我不确定在 Photoshop 中重新调整大小/重新保存它们时是否会遇到这种情况。如果这个问题更适合graphicdesign.stackexchange，请告诉我。在我看来，它有点跨越两个网站

结构：

div  class="media-object"
  div class="media-object-section middle
    img

div  class="media-object"
  div class="media-object-section middle
    img

div  class="media-object"
  div class="media-object-section middle
    img

div  class="media-object"
  div class="media-object-section middle
    img

Answer 1

我建议您使用background-image 和background-size: cover。这将确保无论图像更宽或更高，它将始终填充div，全部以相同的视觉尺寸呈现，并保持其纵横比。

这也可以使用img 元素来完成，尽管由于它的浏览器支持不太好，我选择不这样做。

html, body {
  margin: 0;
  width: 100vw;
}
.media-object {
  display: flex;
  flex-wrap: wrap;
}

.media-object-section {
  width: calc(25vw - 4px);     /*  4px equal margin on each side  */
  height: calc(25vw - 4px);
  margin: 2px;
  background-size: cover;
  background-position: center;
}

.media-object-section.img1 {
  background-image: url('http://lorempixel.com/200/200/animals/1');
}
.media-object-section.img2 {
  background-image: url('http://lorempixel.com/300/200/animals/2');
}
.media-object-section.img3 {
  background-image: url('http://lorempixel.com/200/300/animals/3');
}
.media-object-section.img4 {
  background-image: url('http://lorempixel.com/400/400/animals/4');
}

<div class="media-object">
  <div class="media-object-section middle img1">
  </div>
  <div class="media-object-section middle img2">
  </div>
  <div class="media-object-section middle img3">
  </div>
  <div class="media-object-section middle img4">
  </div>
  <div class="media-object-section middle img2">
  </div>
  <div class="media-object-section middle img3">
  </div>
  <div class="media-object-section middle img4">
  </div>
  <div class="media-object-section middle img1">
  </div>
</div>

根据评论更新

这里没有flex 解决方案

html, body {
  margin: 0;
  width: 100vw;
}
.media-object-section {
  display: inline-block;
  width: calc(25vw - 4px);     /*  4px margin on eachside  */
  height: calc(25vw - 4px);
  margin: 2px -2px -2px 2px;   /*  -2px to compensate for white-space  */
  background-size: cover;
  background-position: center;
}

.media-object-section.img1 {
  background-image: url('http://lorempixel.com/200/200/animals/1');
}
.media-object-section.img2 {
  background-image: url('http://lorempixel.com/300/200/animals/2');
}
.media-object-section.img3 {
  background-image: url('http://lorempixel.com/200/300/animals/3');
}
.media-object-section.img4 {
  background-image: url('http://lorempixel.com/400/400/animals/4');
}

<div class="media-object">
  <div class="media-object-section middle img1">
  </div>
  <div class="media-object-section middle img2">
  </div>
  <div class="media-object-section middle img3">
  </div>
  <div class="media-object-section middle img4">
  </div>
  <div class="media-object-section middle img2">
  </div>
  <div class="media-object-section middle img3">
  </div>
  <div class="media-object-section middle img4">
  </div>
  <div class="media-object-section middle img1">
  </div>
</div>

注意：补偿空白的 -2px 可以通过其他方式解决。更多信息请查看this post