Question

如果有人需要查看完整代码，请给出以下代码和链接 - here：

<div class="features">
    <span class="overlay">
        <img src="image.png" />        
    </span>
    <p>Hey i'm text</p>
</div>


.features {
    width: 33%;
    position: relative;
    height: 380px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
}

.overlay img {
    max-width: 100%;
}

因此，当页面加载时，我将图像作为覆盖内容的叠加层。当用户将鼠标悬停在图像上时，叠加范围会向上滑动。

我的问题是，我想让我的网站响应，所以当用户向内拉浏览器时，我希望相应地调整大小的方框，使其保持方形。

图像将调整大小，因为我已将max-width：100％;上。

问题是里面的P标签。当盒子改变尺寸时，如何让P自动调整大小。

我不介意使用jQuery或任何CSS解决方案。

Answer 1

这应该做你需要的：

<script type="text/javascript">
    window.onresize = fontResize;
    function fontResize() {
        document.body.style.fontSize = parseInt(document.documentElement.clientWidth/100) + 'px';
    }
</script>

你可能需要稍微修改一下才能让它完美运行..

调整文本和最大宽度图像大小的问题

1 个答案: