logo标签列表

固定边距与视口宽度单位（VW）的冲突问题解决方案

htmlcss
14
我有一个容器，它有40像素的内边距。在这个容器里我有一张图片和一些文字。
我想让图片和文字保持同步。如果我调整窗口大小，我的图片会自动调整大小，我想使用"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/

我对结果几乎满意，但我不明白为什么第一个字母没有固定，当您将浏览器最小化或放大时，它会移动相当多。

正如您所看到的，顶部和行高似乎已正确固定。我现在不关心字母间距，但是它在水平轴上没有固定，我怀疑这是因为 left: 20%，应该更长一点，而是沿着 left: calc(20px + (100% - 40px) * 0.3) 的线路。

为什么你不使用text-shadow？ - Duannx
1
@Duannx 我不是在尝试创建阴影，而是将现有的图像转换为 HTML，使其可以像图像一样自动调整大小。 - Erti-Chris Eelmaa
@Erti-ChrisEelmaa 文本的“font-family”与图像的“font-family”不同，为了正确同步/匹配它们，您必须使用相同的字体，因为不同的字体具有不同的字距，无法同步/匹配每个字符。 - Abhishek Pandey
@AbhishekPandey 我理解，但是我认为无论字体和大小如何，最左边的点位置都应该保持不变。我认为Nils的答案非常接近，但它并不是100%固定的（左上角点）。 - Erti-Chris Eelmaa
@Erti-ChrisEelmaa，请查看8月21日9:58的评论。 - Nils Rückmann
8个回答
11

像素和百分比（静态和动态）之间同步很困难。每个单位都应该是动态的。

.main {
  padding-left: 1vw;
  padding-right: 1vw;
  background-color: white;
  position: relative;
}

img {
  width: 100%;
}

.text {
  font-size: 7.3vw;
  position: absolute;
  left: 18.2%;
  top: 11%;
}
<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>

更新的 fiddle，字体不明确。

编辑

我找不到你提供的图片中使用的字体，因此我将图像的第一段改为 Times new roman。

现在，您可以更轻松地追踪具有正确字体系列的图像，尽管您需要手动跟踪文本的起始点。

.main {
  padding-left: 1vw;
  padding-right: 1vw;
  background-color: white;
  position: relative;
}

img {
  width: 100%;
}

.text {
  font-size: 7.3vw;
  position: absolute;
  left: 18.2%;
  top: 11%;
  font-family:
}
<body>
  <div class="main">
    <img src="https://istack.dev59.com/ktEew.webp" />
    <span class="text">YOUR SHAPE.</span>
  </div>
</body>

更新版的样例，图片中使用了Times new roman字体。

3
你不仅需要通过视口宽度来表达字体大小，还需要考虑内边距。因此，正确的计算方式应该是： font-size: calc((100vw - 40px) * 0.072);。
解释：你想要的字体大小相对于图像的宽度，可以表示为fontSize = imageWidth * factor。图像宽度定义为容器的100％，但容器是视口减去40px的100％。
有道理 - 我已经更新了帖子。它几乎是我想要的，但是当你将浏览器窗口最小化/放大时，我不明白为什么第一个字母会移动那么多。我怀疑这是由于“left：20％”造成的，这没有考虑到还有固定的边距。 - Erti-Chris Eelmaa
2
这是同样的问题。百分比值基于容器而不是图像。它们不是线性相关的。因此，在保持您的标记的同时，您需要执行类似于 left: calc(20px + ((100vw - 40px) * 0.175)); 的操作。 - Nils Rückmann
3
1
似乎不起作用：它不能与图像等比例缩放。 - Erti-Chris Eelmaa
我刚刚意识到这可能是由于图像和文本中使用了不同类型的字体。个别字母之间的间距似乎有所不同。我认为这可能是问题所在。 - user5700598
对我来说字母不匹配并不是最重要的，因为在JSFiddle中字体是不同的，但更重要的是，为什么我的字体大小不能像它应该的那样线性缩放呢？如果我在高度为1的div上执行width: calc(100vw - 40px)，它会线性缩放。 - Erti-Chris Eelmaa
3

您不需要在图像中制作文本的阴影，可以使用CSS实现。编辑您的图像并删除阴影，然后将此CSS应用于您的文本：

请查看此链接

https://codepen.io/prateek89760/pen/PKRKeQ

.main {
  padding-left: 1vw;
  padding-right: 1vw;
  background-color: white;
  position: relative;
}

img {
  width: 100%;
}

.text {
text-shadow: 6px 6px #ccc;
  font-size: 90px;
  position: absolute;
  left: 18.2%;
  top: 11%;
}


<img src="" />

<span class="text">YOUR SHAPE.</span>

3

不要使用 .text{ /* css code */ }，而应该使用

<style type="text/css">
.text {
  left: 0;
  font-size: 6.8vw;
  position:absolute;
  text-align:center;
  top: 12%;
  width: 100%
}
</style>
2

以下是我的回答，我不确定是否完全符合您的要求，但也许可以提供一些见解。
我将 .main 的位置更改为绝对定位，这样您的文本就会根据主 div 进行调整大小。

.main  {
  position: absolute;
  padding-left: 20px;
  padding-right: 20px;
  background-color: white;
}

img {
  display: block;
  width: 100%;
}

.text {
  display: block;
  font-size: calc((100vw - 40px) * 0.072);
  line-height: calc((100vw - 40px) * 0.082);
  margin-left: 18%;
  margin-top: -17%;
  
}
<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>

@erti-chris-eelmaa 我尝试调整窗口的宽度和高度，结果和你提供的示例一样有效。希望能对你有所帮助。 - dycodingcoda
2

快速解决方案： 一切都在于起点和正确的字体。

解释： 经过对代码的长时间审核，我可以说@Abhishek Pandey提供的解决方案是一个好的解决方案。但问题是，你需要找到正确的文本起始点，并使用完全相同的字体，其中字体家族是正确的，字重也是正确的。检查一下，因为它们似乎不匹配。

2
编辑后的版本基本上运行良好，但除了 padding 之外，所有值都是相对的。这就是为什么在小或大分辨率下位置会发生变化的原因。
将 padding 更改为以下内容：
.main  {
  padding-left: 3%;
  padding-right: 3%;
}

https://jsfiddle.net/zn4odjrc/8/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接