Question

我正在使用Foundation为一组文本和图像制作布局。我从photoshop导出了png。在Photoshop中可以看到图像看起来像是在ObjectContext objectContext = ((IObjectContextAdapter)dbContext).ObjectContext int commandTimeout = objectContext.CommandTimeout ?? objectContext.Connection.CreateCommand().CommandTimeout; s的布局中很好地包含在方框中。然而，当我把它们放在那个布局中时，其中一个图像看起来比其他图像大。 Photoshop是否将这些图像保存为原始大小，而不是设计师在布局上将其重新调整大小？使图像在页面上看起来具有相同大小的最佳做法是什么？

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

结构：

div

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了解详情

如果png的大小不同，我怎样才能最好地调整图像大小？

1 个答案: