Question

Hallo社区的stackoverflow，我希望你有一个美好的一天：）

直截了当：我已经开始计划我的新组合（我是一名艺术总监）。我最初的想法不仅仅是让一个投资组合响应（我认为1024x768px一直到2560x1600px），而且还通过全浏览器屏幕图像进行了一些不错的工作预览。

正如你所料，我已经解决了一个问题。设计为完全适合2560x1600px的图像不会调整为1440x900px而不会降低质量或失真。

所以我真的可以使用你的帮助和体验球员...是否有一个“完美”的图像大小，可以精确调整大小以下分辨率：1024x768px，1280x800px，1280x1024px，1440x900px，1920x1080px，2560x1600px。甚至可以这样做吗？

我非常感谢你的帮助。在此先感谢：）

Answer 1

不，没有图像可以完美地扩展到所有不同尺寸，因为它们代表了几种不同的形状或纵横比。将图像缩放为宽度与高度的不同量会导致图像失真并且通常看起来不太好。

选项如下：

按比例缩放图像（按比例缩放），使其填充屏幕的一个维度并且不会完全填充其他维度。这是可以显示的最大的未剪切图像。
按比例缩放图像，直到它完全填满屏幕。如果屏幕与图像的形状不完全相同，则需要对图像进行过度调整以填充屏幕。显示图像将沿一个方向裁剪图像的一部分。这是缩放图像以完全“填充”屏幕的常规方式。如果图像是在边缘周围创建一些“额外”且不重要的空间而不是裁剪其中的一部分，因为填充尺寸过大不会导致任何问题。
按照选项＃1缩放图像，并使用协调的背景颜色填充图像未覆盖的任何区域。
创建与图像形状完全相同的容器或框架，并缩放图像以填充该图像。
按比例缩放图像以准确填充整个屏幕。这将使图像在一个方向上拉伸得比另一个方向更多，并且图像将会扭曲一些，但不会裁剪任何内容，整个屏幕都会被覆盖。圆形物将是椭圆形的，其他形状将被扭曲。

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

Answer 2

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

缩放图像并更改宽高比总是会导致失真。

Answer 3

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

这是一个很好的简单提示，只有css / html：

<强>成分

具有所需比率的透明PNG图像（透明比率conserver.png）
标签
不同视口的不同图像（retina.jpg，desktop.jpg， tablet.jpg ...）

这个想法是打开一个标签，并为其分配一个透明的图像（具有我们想要的比例）。我们还添加了class =“responsive-image”，这些都是HTML格式。

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

在CSS中，我们将background-size设置为适合我们选择图像的宽度。

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

您可以从here下载演示版。

响应全屏图像而不会降低质量，可能吗？

3 个答案: