Question

我有一个带有图像src的div类，其中我当前有一个div用于动态文本，尽管我可以接受建议。

<div class=“image-container”>
    <img src=“/assets/product.jpg”)>
    <div class="preview-container">
        <img src="/assets/images/Product_1.jpg" class="prv-img">
        <div class="preview-text">
            <div class="text-outputs">
                <p data-name=“line_1”>SAMPLE TEXT !</p>
                <p data-name=“line_2”>SAMPLE TEXT 2</p>
                <p data-name=“line_3”>SAMPLE TEXT3</p>
            </div>
        </div>
    </div>
</div>

此图像保持相同的宽高比，但图像大小会相应地通过跳转到断点大小或根据屏幕宽度连续调整大小的屏幕而变化。

正如上面代码中所暗示的那样，在这张图片的顶部，我想叠加3行文字，给人的印象是这些文字写在产品本身的图像上。在某些情况下，它是一张带有空白白色标签的瓶子的照片，我想要添加一些单词，如饮料XYX，自1923年以来制作，负责任饮料

我希望图像上文字的文字大小，间距，线条高度和相对位置随着图像尺寸的变化而不断缩放。

有关如何执行此操作的任何想法。是否可以只用css或者我也需要一些javascript？

任何建议都会受到欢迎。

杰森

Answer 1

如果您不想使用CSS，那么我认为您需要搭载用于调整图片大小的CSS。假设您拥有@media实体（直接或通过调整容器大小间接控制图像的大小），则可以添加或复制具有类似条目的图像实体，以酌情以vw单位或rem控制字体大小。

我意识到这不是您可能想要的防弹通用解决方案-如果更改主题并且更改断点宽度，则还必须更新CSS-但这是一种无需JavaScript的方法。

将很高兴能有一种方法来按其容器的大小调整文本的大小。

使用css在图像上缩放比例文本内容

1 个答案: