时间戳

首页 > 解决方案 > 使 Image 溢出 hero 元素并对齐到右下角

html - 使 Image 溢出 hero 元素并对齐到右下角

问题描述

我的代码：https ://jsfiddle.net/jqno1x6p/

我有这段代码，在顶部，我有一个英雄元素，我想在英雄元素的右下角放置一个图像，然后溢出到下一部分。我不知道如何做到这一点。

这是我的英雄元素的设置方式：

<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>

标签： htmlcss

解决方案

不知道溢出到下一部分是什么意思...您可以设置overflow:hiddenonhero-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>

推荐阅读