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

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

您可以将伪元素的宽度和高度限制为视口的宽度(使用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演示

这个怎么运作

假设您要定义一个视口范围(例如[480px .. 1000px]),以便元素可以0从其最大值调整(上限受固定max-width和a 限制max-height):然后您可以使用从注入css calc()函数的两个点开始的线方程

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