I have a banner picture that is supposed to display only for small devices a specified section. See also here: Stackoverflow Topic
Unfortunately, this also means that the content below now overlaps and is no longer in the responsive flow with the height of banner image.
Here the Hello, I have a banner picture that is supposed to display only for small devices a specified section. See also here: [Stackoverflow Topic][1]
Unfortunately, this also means that the content below now overlaps and is no longer in the responsive flow with the height of banner image.
Here the jsbin
.img-responsive {
max-width: 100%;
}
@media (max-width: 1000px) {
.cropped {
position: relative;
height: 250px;
}
.cropped .img-responsive {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-width: 150%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<section class="banner">
<div class="cropped">
<img src="https://images.unsplash.com/photo-1601134728471-aa7f168d82ed?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1952&q=80" alt="" class="img-responsive">
</div>
</section>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-9 mx-lg-auto mt-5 mb-5">
<h2 class="text-uppercase">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, dolorum.
</h2>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed magni fugiat dolorum! Deserunt velit fuga provident, beatae delectus omnis culpa alias expedita, inventore molestiae aut explicabo? Nihil eum odit saepe voluptatem optio voluptatibus,
repudiandae laborum ducimus suscipit eius voluptatum porro debitis fugiat nobis ipsa inventore animi placeat expedita ex sint.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed magni fugiat dolorum! Deserunt velit fuga provident, beatae delectus omnis culpa alias expedita, inventore molestiae aut explicabo? Nihil eum odit saepe voluptatem optio voluptatibus,
repudiandae laborum ducimus suscipit eius voluptatum porro debitis fugiat nobis ipsa inventore animi placeat expedita ex sint.</p>
</div>
</div>
</div>
</body>
</html>
question from:
https://stackoverflow.com/questions/65906324/content-below-in-flow-of-absolute-banner-image 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
