使用 css 和 html 缩放背景图像

Question

我很难用 css 和 html 正确缩放图像。 css 看起来像这样：

@media (max-width: 979px) {
.header-wrapper {
height: 388px;
background: url("../images/taikuri.jpg") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

然后 html 看起来像这样：

<header id="header" class="header">
<div class="header-wrapper"> <img src="./imag/taikuri.jpg"  
 alt="taikureita" width="2050" height="812"/>

我想以某种方式缩放图像以获得更快的加载速度。 GTmetrix 页面测试给了我这个建议：以下图像在 HTML 或 CSS 中调整了大小。提供缩放图像可以节省 49.1KiB（减少 69%）。

我一直想不出正确的方法，所以我不得不寻求帮助。

Answer 1

您试图做的是减小图像的文件大小，以便加载速度更快。

您在问题中发布的解决方案试图做的是减小图像的显示宽度和高度，因此它在屏幕上显示为较小的宽度和高度。然而，同一张图片，虽然文件很大，但仍在加载中。浏览器只是为您缩小了它的外观。

查看您的代码，您设置的背景图片与您写入 html 的图片相同。这无关紧要，因为图像会缓存，但只是让您知道您基本上是在嵌入图像两次。

这样想：我有 200 磅。如果我给自己拍张照片并缩小它，我在现实生活中仍然是 200 磅。这就是你想要做的。但是……如果我减掉一些体重，那么我在现实生活中就会变小，如果我坐在你身上就不会那么疼了。这就是你要问的怎么做。有道理吗？

在这种情况下，请在 photoshop 中打开图像，制作副本，将其调整为更小的宽度（您可以从“图像”>“图像大小”中执行此操作）并启用包含纵横比控制。上传该图片并改用它。

另一个更好的选择是

从你的 html 中删除你的 <img>，因为它是重复的而且很大。您可以在 css.
设置更多媒体查询以在不同的媒体宽度下使用不同的图像。

我看到您已经在使用这张最大宽度为 979 像素的大图片。如果是这种情况，请设置一个宽度为 979px 的图像并将其用于此媒体查询。如果您需要变大，请创建一个具有更高 jpg 压缩率的更大图像并创建一个更大的媒体查询来处理它，类似于以下代码（注意我将您的图像重命名为设置不同图像的示例）：

@media (max-width: 979px) {
    .header-wrapper {
        height: 388px;
        background: url("../images/taikuri_979w.jpg") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

这是第二个媒体查询，图片更大。请注意，我添加了一个带有最小高度的百分比填充顶部，以便顶部区域分别缩放到浏览器的宽度）：

@media (min-width: 1000px) {
    .header-wrapper {
        height: auto;
        min-height:388px;
        background: url("../images/taikuri_really_big.jpg") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding-top:35%;
    }
}

如果您没有 photoshop，您可以使用如下服务调整图像大小：http://www.picresize.com/ 我从来没有用过这个，但它看起来像你想要的。此外，如果您使用 Mac，预览应用程序会调整图像大小。不确定 Windows 或 Linux 上的内容，抱歉！

Answer 2

使用 CSS 缩放图像不会提高加载速度。这是因为您的浏览器不会按照您在 CSS 中指定的大小下载图像。浏览器以完整尺寸下载图像，然后以您在代码中指定的任何尺寸显示图像。

您应该查看 tinypng.com or compressor.io 以了解如何压缩图像。这将帮助您提高加载速度。压缩图像，使其文件大小更小。占用硬盘的时间会更少 space，服务器传输给用户的时间也会更少。

Answer 3

您可以使用javascript在页面加载后加载图像，并在标签之前放置类似这样的内容。

 <script>
 var width = document.getElementById('header').clientWidth;
 if(width>=1000)
 {
     document.getElementById("imageid").src="./images/BigImage.jpg";
 }
 if(width>500 && width<1000)
 {
     document.getElementById("imageid").src="./images/MediumImage.jpg";
 }
 if(width<=500)
 {
     document.getElementById("imageid").src="../images/SmallImage.jpg";
 }
 </script>

当然，这假设浏览器已打开 javascript。

使用 css 和 html 缩放背景图像

Scaling a background image with css and html

html

css

scaling

image

image-scaling