响应式全屏图像而不损失质量，可能吗？

Question

你好 stackoverflow 社区，希望你今天过得愉快 :)

开门见山： 我已经开始计划我的新作品集（顺便说一句，我是一名艺术总监）。我最初的想法不仅是让作品集响应式（我认为 1024x768px 一直到 2560x1600px），而且还通过全浏览器屏幕图像提供一些不错的作品预览。

正如你所料，我遇到了一个问题。设计为完全适合 2560x1600 像素的图像不会在不损失质量或扭曲的情况下调整为 1440x900 像素。

所以我真的可以利用你们的帮助和经验...是否有一个“完美”的图像尺寸可以完美地调整到以下分辨率：1024x768px、1280x800px、1280x1024px、1440x900px、1920x1080px、2560x1600px。有可能这样做吗？

我真的很感谢你的帮助。提前致谢 ：）

Answer 1

不要尝试将整个图像缩放到所有这些不同的分辨率，而是考虑保留纵横比（宽度：高度），同时缩放到接近（但大于）所需的分辨率，然后裁剪图像。

缩放图像和更改纵横比总是会导致失真。

Answer 2

不，不存在可以完美缩放到所有这些不同尺寸的图像，因为它们代表几种不同的形状或纵横比。将图像的宽度和高度缩放不同的量会导致图像扭曲，并且通常看起来不太好。

选项如下：

1. 尽可能缩放图像（按比例），使其填充屏幕的一个维度，但不会完全填充另一个维度。这是可以显示的最大的未裁剪图像。
2. （按比例）缩放图像，直到它完全填满屏幕。如果屏幕与图像的形状不完全相同，则需要过度缩放图像才能填充屏幕。显示图像将沿一个方向裁剪图像的一部分。这是缩放图像以完全“填满”屏幕的正常方式。如果创建的图像在边缘周围有一些“额外”且不重要的空间，那么由于填充尺寸过大而裁剪掉其中一些空间不会导致任何问题。
3. 按照选项 #1 缩放图像，并使用协调的背景颜色填充屏幕上未被图像覆盖的任何区域。
4. 创建与图像形状完全相同的容器或框架，然后缩放图像以填充该容器或框架。
5. 非按比例缩放图像以完全填满整个屏幕。这将在一个方向上比另一个方向拉伸图像更多，并且图像会有些扭曲，但不会裁剪任何内容，并且会覆盖整个屏幕。圆形的东西会变成椭圆形，其他形状的东西会变形。

在所有情况下，您都希望分析可能的显示尺寸并选择形状与尽可能多的目标屏幕尺寸最接近的源图像。

Answer 3

您可以使用 Photoshop 或任何其他软件准备许多图像，然后使用响应式设计，您将能够为不同的屏幕尺寸显示足够的图像。

这是一个仅使用 css/html 的简单技巧：

成分

• 具有所需比例的透明 PNG 图像
  (transparent-ratio-conserver.png)

• 标签

• 不同视口的不同图像（retina.jpg、desktop.jpg、
  table.jpg...)

这个想法是打开一个标签并为其分配一个透明图像（具有我们所需的比例）。我们还添加了 HTML 中的 class="responsive-image"。

<img src="img/transparent-ratio-conserver.png" class="responsive-image">

在 CSS 中，我们设置背景大小以适合，并选择图像的宽度。

.responsive-image{
    width: 100%;
    background-size: 100% 100%;
} 

最后，我们为每个视口提供正确的图像：

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-image{
        background-image: url('../img/retina.jpg');
    }
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-image{
        background-image: url('../img/desktop.jpg');
    }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
        background-image: url('../img/tablet.jpg');
    }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
        background-image: url('../img/mobile-hd.jpg');
    }
}
/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-image{
        background-image: url('../img/mobile-ld.jpg');
    }
} 

您可以从 此处下载演示。