如何在视口大小调整时使用渐进缩放调整图像大小

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并且不会随页面缩放。我希望它变得更小，因为它不再适合。我怎么能这样做？

BTW，这是一个关于Wordpress网站的黑客攻击。我想使用上面的CSS技巧来避免处理PHP等问题。

编辑：刚删除了float：left;

Answer 1

您可以将伪元素的宽度和高度限制为视口的宽度（使用vw单位），并定义最大宽度，如此

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

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

另外，做一些基本的数学计算你可以计算你的宽度和高度值，这样元素就可以逐渐显示在给定的视口大小上（或在其下面消失），例如。

.site-title::before {
  max-width: 200px;
  max-height: 200px;

  /* resize height and width from 0 to 200px 
     in the viewport range of [480px .. 1000px] */
  height: calc(0.384615 * 100vw - 184.615px); 
  width: calc(0.384615 * 100vw - 184.615px);
}

  

Codepen Demo

工作原理

假设您要定义一个视口范围（例如[480px .. 1000px]），以便该元素可以从0调整为其最大值（ upper 受限于固定{ {1}}和max-width）：然后您可以使用equation of the line from two points注入css max-height函数

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

Answer 2

使用 身高：100％; 宽度：100％; 在css ...