主页 / 问题 / 1077561
Accepted
Slam
Asked:2020-02-03 06:59:00 +0000 UTC2020-02-03 06:59:00 +0000 UTC

如何将包含所有内容的 div 拉伸到整个窗口宽度

  • 772

需要将块拉伸到屏幕的整个宽度。块结构：

.wrap{
    display: inline-block;
}
.wrap span{
    padding: 1vw;
    background: #000;
    color: #fff;
    font-size: 2.5vw;
    font-family: Arial;
}
<div class='wrap'>
    <span>hello world!</span>
</div>

同时，不希望更改字体大小或子元素的任何属性div.wrap，或者以某种方式按比例进行更改。下面我画了一张图表，说明现在的情况以及最终的结果。

结果架构 初始方案

如果图片中的一切都清楚，如何以及通过什么方法来拉伸它们，那么我找不到带有块的信息。对于您在这件事上的帮助，我将不胜感激。

javascript

1 个回答

  1. Best Answer

    如果您需要按比例收缩和拉伸的橡胶文本，那么最好使用 svg：

    <svg viewbox="0 0 100 20" preserveAspectRatio="none" style="background-color: #b9b9b9">
    <text x="50%" y="50%" fill="black" font-family="sans-serif" font-size=".7em" dominant-baseline="central" text-anchor="middle">Hello, World!</text>
</svg>

    • 0

相关问题