使图像，大小/对齐相对于标题

我是HTML/CSS的新手（我知道JavaScript），这是我在页面上的第一次真正尝试。图像很大，我希望它相对于整个窗口/容器大小，并与容器/窗口对齐。如果可能的话，如果可能的话，我希望能够用一个％的数字进行尺寸。我知道我必须将图像移至标题下方的主体。我的图像是否会从我的主背景通过标题继承其响应性属性（即宽度调整，对齐）？

<!DOCTYPE html>
<html>
<head>
    <title>Mac Miller Tribute</title>
    <link rel="stylesheet" type="text/css" href="C:UsersgeekDesktopNew-SiteCSSsytles.css">
</head>
<div class="main-image">
    <a href="https://en.wikipedia.org/wiki/Mac_Miller" target="_blank">
  <img src="C:UsersgeekDesktopNew-SiteImagesmacmiller.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>

您是否尝试在图像标签中添加'width =" 100％"？

<img width="100%" src="C:UsersgeekDesktopNew-SiteImagesmacmiller.jpg" alt="Mac miller picture" >

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

相关内容

最新更新

热门标签：