如何使用视口大小上的渐进缩放来调整图像大小 [英] How to adjust an image size with a progressive scaling on viewport resize

问题描述

我有一个名为site-title的div，它保留了我的网站的标题。我想使用CSS将标题添加到标题的左侧。我可以这样做：

  .site-title :: before {
 content：; 
 background：url（logo.jpg）; 
 background-size：200px 200px; 
位置：绝对; 
 width：200px; 
 height：200px; 
} 
  

在我为标题添加一些填充项后，但图像为200像素×200像素，不能与页面一起缩放。我希望它变得更小，当它不适合了。我怎么做到这一点？

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

编辑：刚删除的float：left; $ b $您可以将伪元素的宽度和高度限制为视口的宽度（使用 vw > 单位），并定义一个最大宽度就像这样

  .site-title :: before {
 content： ; 
 background：url（logo.jpg）; 
 background-size：cover; 
位置：绝对; 
 max-width：200px; 
最大高度：200px; 
 width：20vw; 
身高：20vw; 
} 
  

当视口小于<$时，伪元素将开始缩小其大小C $ C> 1000像素。在给定的断点处，你也可以隐藏伪元素。

---

另外，做一些基本的数学运算，你可以计算出你的宽度和高度值，所以元素逐渐出现在（或消失在）给定的视口大小，例如

  .site-title :: before { 
 max-width：200px; 
最大高度：200px; 
 
 / *在视口范围[480px..1000px] * / 
 height：calc（0.384615 * 100vw  -  184.615px）中调整高度和宽度从0到200px 
的大小。 ; 
 width：calc（0.384615 * 100vw  -  184.615px）; 
} 
  

I have a div called site-title that keeps the title of my site. I want to add an image to the left of the title using CSS. I could do it as follows:

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

This works fine, after I add also some padding to the title, etc. But the image is 200px x 200px and doesn't scale with the page. I would like it to become smaller when it wouldn't fit anymore. How can I do this?

BTW, this is a hack on a Wordpress site. I want to use a CSS trick like above to avoid having to deal with the PHP, etc.

Edit: just removed float: left;

解决方案

You could limit the width and height of your pseudoelement to the width of the viewport (using vw units), and defining also a max-width like so

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

The pseudoelement will begin to reduce its size when the viewport is less than 1000px. Under a given breakpoint you could also hide the pseudoelement.

---

Also, doing some basic math you could calculate your width and height values so the element progressively appears over (or disappears under) a given viewport size, e.g.

.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

---

How it works

Let say you want to define a viewport range (e.g. [480px .. 1000px]) so that the element can resize from 0 to its maximum value (upper limited by a fixed max-width and a max-height): then you could use the equation of the line from two points injected into the css calc() function

Here's the simple calculations behind those values that I've made (so you can see how to change the range of the element visibility as you prefer)

这篇关于如何使用视口大小上的渐进缩放来调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！