Question

我是html / css的新手（我知道Java语言），这是我第一次真正尝试页面。图像很大，我希望它相对于整个窗口/容器的尺寸调整大小，并使其自身与容器/窗口对齐。如果我的想法正确，我希望能够使用％的数字来调整它的大小。我知道我必须将图像移到标题下方的主体中。我的图片会从主背景一直到标题继承其响应特性（即宽度调整，对齐）吗？

<!DOCTYPE html>
<html>
<head>
    <title>Mac Miller Tribute</title>
    <link rel="stylesheet" type="text/css" href="C:\Users\geek\Desktop\New-Site\CSS\sytles.css">
</head>

<div class="main-image">
    <a href="https://en.wikipedia.org/wiki/Mac_Miller" target="_blank">
  <img src="C:\Users\geek\Desktop\New-Site\Images\macmiller.jpg" alt="Mac miller picture" >
</a>
</div>

<div class="main-background">

    <h1 class="heading">Mac Miller Tribute</h1>
    <body>
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

Answer 1

您是否尝试过在图片标签中添加'width =“ 100％”'？

<img width="100%" src="C:\Users\geek\Desktop\New-Site\Images\macmiller.jpg" alt="Mac miller picture" >

这应该使您的图片相应地调整大小，同时始终保持容器大小的100％。

使图像，尺寸/相对于标题对齐？

1 个答案: