html - 使用 css 和 html 缩放背景图像

标签 html css image scaling image-scaling

我很难用 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%)。

我还没有找到正确的方法,所以我不得不寻求帮助。

最佳答案

您尝试做的是减小图像的文件大小,以便更快地加载。

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

查看您的代码,您将背景图像设置为与您写入 html 的图像相同的内容。这没关系,因为图像会缓存,但只是为了让您知道您基本上将图像嵌入了两次。

这样想:我有 200 磅。如果我给自己拍照并缩小它,我在现实生活中仍然是 200 磅。这就是你想要做的。但是...如果我减轻了一些体重,那么我在现实生活中会更小,如果我坐在你身上也不会那么痛。这就是你要问的怎么做。有意义吗?

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

另一个更好的选择是

  1. 从您的 html 中删除您的 ,因为它重复且巨大。您可以在 CSS 中重新创建缩放效果。
  2. 设置更多媒体查询以使用不同媒体宽度的不同图片。

我看到您已经在使用这个最大宽度为 979 像素的大图片了。如果是这种情况,请设置一个宽度为 979 像素的图像并在此媒体查询中使用它。如果您需要变大,请创建具有更高 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;
    }
}

这是第二个媒体查询,图片更大。请注意,我添加了一个 padding-top 作为具有最小高度的百分比,以便顶部区域将分别缩放到浏览器的宽度):

@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 上可能有什么,抱歉!

关于html - 使用 css 和 html 缩放背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28863920/

相关文章:

javascript - 使用函数为输入添加值

javascript - 如何向此 JavaScript/HTML 代码添加按钮,以便我的代码仅在按下按钮后运行?

css - div内的垂直对齐问题

html - 过渡延迟菜单,如 Apple 网站

python - python mahotas:应用阈值过滤器并将图像保存为pgn

javascript - 无法播放youtube视频的JavaScript

javascript - 在 html 中添加超链接时,文本没有正确 chop

html - 如何在Bootstrap 2.2.2中并排保持div

css - 我应该使用 JPG 还是 PNG 作为平铺背景(背景重复)?

c++ - OpenCV - 如何从 .ppm 文件列表中形成 .avi