如何使用CSS制作文本并遵循图像大小

使用CSS制作文本并遵循图像大小可以通过以下步骤实现：

创建HTML文件并引入CSS样式表。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <img src="image.jpg" alt="Image">
        <p class="text">This is some text.</p>
    </div>
</body>
</html>

创建CSS样式表（styles.css）并定义容器样式、图像样式和文本样式。

.container {
    position: relative;
    width: 300px; /* 设置容器宽度 */
}

.container img {
    width: 100%; /* 图像宽度填充容器 */
    height: auto; /* 图像高度自适应 */
}

.container .text {
    position: absolute;
    top: 50%; /* 文本垂直居中 */
    left: 50%; /* 文本水平居中 */
    transform: translate(-50%, -50%); /* 文本居中定位 */
    font-size: 20px;
    color: #000;
}

在上述代码中，我们创建了一个容器（.container），并设置其宽度为300px。然后，在容器中放置了一个图像和一个段落元素（.text）。通过设置图像的宽度为100%，它将自动适应容器的大小，并保持其原始比例。接下来，我们使用绝对定位将文本居中放置在图像上方。