如何使用 HTML&CSS 加载一张图片并使用两次？没有JS

Question

我正在设计我未来的博客页面，我意识到大多数人会两次加载相同的图像，在这种情况下，一个更大的徽标图像和一个中或小的徽标图像。

问题是，您已经加载了一个大徽标图像，那么为什么要浪费资源加载较小的版本而不是仅使用相同的图像并使用 css 调整其大小？

我找不到任何理由这样做，所以我开始想办法多次使用相同的图像，减少http请求和页面加载时间。

我现在的想法是使用只有 1 张图片的精灵，即大徽标，然后你只需使用它两次：

• 完整的标志：就像使用任何其他精灵图像一样使用它
• 中等徽标：调整大小的精灵图像

现在这是我发现的最好的方法： http://tobyj.net/responsive-sprites/#notes

我正在寻找执行此操作的最佳方法，或者另一种替代方法，但没有 JS，必须加载 js 文件会破坏减少 HTTP 请求的目的。

你怎么看？有任何想法吗？ 问候。

已解决：谢谢大家，这比我想象的要容易，现在我在想，到底是谁设计了模板？他们添加了大量重复的不需要的 HTTP 请求和代码：S

Answer 1

你可以：

1.调整图片大小

img {
  max-width: 100%;
  height: auto;
}
.big-logo {
  width: 100%;
}
.medium-logo {
  width: 50%;
}
.small-logo {
  width: 30%;
}

<div class="big-logo">
  <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
</div>

<div class="medium-logo">
  <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
</div>

<div class="small-logo">
  <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
</div>

2。使用图片作为背景

.big-logo, 
.medium-logo, 
.small-logo {
  background: url('http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png') no-repeat top left;
  background-size: cover;
  
}
.big-logo{
  width: 500px;
  height: 149px;
}
.medium-logo {
  width: 250px;
  height: 74px;
}
.small-logo {
  width: 150px;
  height: 44px;
}

<div class="big-logo"></div>

<div class="medium-logo"></div>

<div class="small-logo"></div>