html - 如何通过视口(viewport)调整大小的渐进缩放来调整图像大小

Question

我有一个名为 site-title 的 div，用于保存我网站的标题。我想使用 CSS 在标题左侧添加一个图像。我可以这样做:

.site-title::before {
   content: "";
   background: url("logo.jpg");
   background-size: 200px 200px;
   position: absolute;
   width: 200px;
   height: 200px;
}

这很好用，在我还为标题等添加了一些填充之后。但是图像是 200px x 200px 并且不随页面缩放。当它不再适合时，我希望它变小。我该怎么做？

顺便说一句，这是对 Wordpress 网站的黑客攻击。我想使用上面的 CSS 技巧来避免处理 PHP 等。

编辑:刚刚删除了 float: left;

Answer 1

您可以将伪元素的宽度和高度限制为视口(viewport)的宽度(使用 vw 单位)，并像这样定义最大宽度

.site-title::before {
   content: "";
   background: url("logo.jpg");
   background-size: cover;
   position: absolute;
   max-width: 200px;
   max-height: 200px;
   width: 20vw;
   height: 20vw;
}

当视口(viewport)小于 1000px 时，伪元素将开始减小其大小。在给定的断点下，您还可以隐藏伪元素。

---

此外，做一些基本的数学运算，您可以计算宽度和高度值，以便元素逐渐出现在给定视口(viewport)尺寸上方(或消失在下方)，例如

div {
  max-width: 200px;
  max-height: 200px;
  background: #9bc;
  overflow: hidden;
  height: calc(0.38461 * 100vw - 184px);
  width: calc(0.38461 * 100vw - 184px);
}

<div>
   I will disappear when the viewport is wide less than 480px
</div>

---

工作原理

假设您要定义视口(viewport)范围(例如 [480px .. 1000px])，以便元素可以从 0 调整到其最大值(upper 由固定的 max-width 和 max-height 限制):然后你可以使用 equation of the line from two points注入(inject) css calc() 函数

这是我所做的这些值背后的简单计算(因此您可以看到如何根据需要更改元素可见性的范围)

---

截至 2020 年 12 月的更新

引入了一些有用的 CSS 函数，例如 min()/max()/clamp()可以通过这种方式在现代浏览器上简化样式

 .site-title::before {
     height: min(200px, calc(0.38461 * 100vw - 184px));
     width: min(200px, calc(0.38461 * 100vw - 184px));
 }