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. 删除您的 <img>从你的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/

相关文章:

html - 嵌套表中的 Colspan 样式失败

php - 如何计算在html输入元素中输入的值的数量?

jquery - 如何使用 bootstrap.css 处理网页设计表单到中心页面和版权到底部中心

jquery - 如何为数据表中动态添加的子行添加背景颜色?

c# - 如何使用 .net 将 avi 文件转换为 jpg 的图像数组

image - ffmpeg 将一系列图像转换为视频 - 每两帧之间使用交叉淡入淡出或任何其他过渡

php - 从 echo php 调整图像大小

javascript - slice() 在控制台中正确返回,但字符串在 <td> 中未被替换

javascript - 浏览器如何自动将 "Page Source"Javascript 转换为 HTML?

javascript - svg animateMotion on end 事件监听器