Question

我有这段代码，在顶部，我有一个hero元素，我想在其中放置图像到hero元素的右下部分，然后溢出到下一部分。我不确定如何做到这一点。

这是我的Hero元素的设置方式：

<div class="hero-image">
      <img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
      <div class="hero-text">
        <h1>Tennant management, <span class="emphasize">innovated.</span></h1>
      </div>
</div>

Answer 1

不确定进入下一部分的含义是什么...您可以在overflow:hidden类上设置hero-image，以隐藏图像的溢出部分：

.hero-image {
  overflow:hidden; // <-- hide the overflow
}

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>

    <nav class="navbar">
      <span class="brand"><a href="index.php">tensys</a></span>
      <ul class="nav-list">
        <li class="nav-link left"><a href="">Home</a></li>
        <li class="nav-link left"><a href="">Our Story</a></li>
        <li class="nav-link right"><a href="">Services</a></li>
        <li class="nav-link right"><a href="">Client Portal</a></li>
      </ul>
    </nav>

    <div class="hero-image">
      <img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
      <div class="hero-text">
        <h1>Tennant management, <span class="emphasize">innovated.</span></h1>
      </div>
    </div>
  </body>
</html>

另一种方法（也许是更好的方法）是通过将图像宽度设置为与页面宽度相等来使图像适合页面-高度将被调整：

img {
    width: 100%;
}

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>

    <nav class="navbar">
      <span class="brand"><a href="index.php">tensys</a></span>
      <ul class="nav-list">
        <li class="nav-link left"><a href="">Home</a></li>
        <li class="nav-link left"><a href="">Our Story</a></li>
        <li class="nav-link right"><a href="">Services</a></li>
        <li class="nav-link right"><a href="">Client Portal</a></li>
      </ul>
    </nav>

    <div class="hero-image" style="overflow:hidden">
      <img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
      <div class="hero-text">
        <h1>Tennant management, <span class="emphasize">innovated.</span></h1>
      </div>
    </div>
  </body>
</html>

使Image溢出hero元素并与右下角对齐

1 个答案: