我有一个具有40px填充的容器。在那个容器中，我有一个图像和文本。
我正在尝试使图像和文本保持同步。如果我调整窗口大小，我的图像会自动调整大小，并且我试图使用单位“vw”使文本与图像保持同步，但是它无法正常工作。填充以某种方式发生冲突，但是我不确定正确的解决方案是什么。
这是我的简单示例:
.main {
padding-left: 20px;
padding-right: 20px;
background-color: white;
position: relative;
}
img {
width: 100%;
}
.text {
font-size: 6.8vw;
position: absolute;
left: 20%;
top: 12%;
}<body>
<div class="main">
<img src="http://screenshots.chriseelmaa.com/temp/d_slider_1_1_jpg__1918×880__1F40F570.png" />
<span class="text">YOUR SHAPE.</span>
</div>
</body>JSFiddle:https://jsfiddle.net/zn4odjrc/
如您所见，如果将浏览器窗口拖动得非常小和很大，则文本将与图像不同步。如何在计算中处理固定保证金？
我尝试了
font-size: calc(3vw - 40px)这样的疯狂内容，但没有运气。//编辑:
在Nils的帮助下，我设法确定了行高和字体大小，并得到了以下结果:
https://jsfiddle.net/zn4odjrc/6/
我几乎对结果感到满意，但是我不明白为什么首字母没有固定，当您最小化浏览器的大小时，它会移动很多。
如您所见，顶部和线条的高度似乎已正确固定。我现在不在乎字母间距，但是它在水平轴上不是固定的，我怀疑是因为左:20％，应该比左行更长:calc(20px +(100％- 40px)* 0.3)
最佳答案
您不仅必须通过视口宽度来表达字体大小，还必须通过填充来表达字体大小。因此正确的计算应类似于:font-size: calc((100vw - 40px) * 0.072);。
说明:所需的字体大小是相对于图像宽度的，可以表示为fontSize = imageWidth * factor。图像宽度定义为容器的100％，但是容器是视口的100％减去40px
关于html - 固定边距和VW(视口(viewport)宽度)单位冲突，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45664999/