个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
27
4
我有一个容器，内边距为 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/
如您所见，如果将浏览器窗口拖动得非常小和非常大，文本就会与图像不同步。我应该如何处理计算中的固定 margin ？
我试过疯狂的东西，比如 font-size: calc(3vw - 40px)，但没有成功。
//编辑:
在 Nils 的帮助下，我设法确定了行高和字体大小并得到了这个结果:
https://jsfiddle.net/zn4odjrc/6/
我几乎对结果感到满意，但是我不明白为什么第一个字母没有固定，当您将浏览器最小化时它会移动很多非常小/大。
如您所见，顶部和行高似乎已正确固定。我现在不关心字母间距，但是它没有固定在水平轴上，我怀疑这是因为 left: 20%，它应该比 left: calc(20px + (100% - 40px) * 0.3)
最佳答案
很难将像素与百分比同步(静态与动态)。每个单元都应该是动态的。
.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>Updated 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="/image/ktEew.png" />
<span class="text">YOUR SHAPE.</span>
</div>
</body>Updated fiddle 图片中使用了 Times new roman 字体
关于html - 固定边距和 VW(视口(viewport)宽度)单位冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45664999/
27
4
0
我正在尝试获得一个按钮，按下该按钮时会改变颜色。当再次按下时，它应该变回原来的颜色。我究竟做错了什么？ 我的模板中的按钮: export default { data: {
我是一名优秀的程序员,十分优秀！