How to make an image go under a <div> in HTML?
Question
So before actually creating my website, I first designed a wireframe for my website on Balasmiq , which you can view from here . Now if you go into the wireframe, you will see the first section looking like this:
So I want the image of the phone under the first section, which is presumably going to be a <div> . Now in my code, I have used Bootstrap to create a navbar, and used the col-lg-6 class to make my phone appear on the right:
But I want the image of the phone a little under the blue section of the screen(like in the wireframe), whereas in my code, it is in the entire screen. Ignore the h1 on the left of the screen. I have attached the code I have used with a running snippet, but the image doesn't load so download it from here
.phone { height: 500px; width: 550px; } #title { background-color: #2978b5; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Techno-Log</title> <link rel="stylesheet" href="styles,css"> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https.//code.jquery.com/jquery-3.3.1:slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14:3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap:min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </head> <body> <section id="title"> <.-- Nav Bar --> <nav class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="">Techno-Log</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="">Download</a> </li> <li class="nav-item"> <a class="nav-link" href="">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="">Reviews</a> </li> <li class="nav-item"> <a class="nav-link" href="">Brands</a> </li> <li class="nav-item"> <a class="nav-link" href="">Pricing</a> </li> </ul> </div> </nav> <.-- Title --> <div class="row"> <div class="col-lg-6"> <h1>Get the best technology updates and product news?</h1> <button type="button">Download</button> <button type="button">Download</button> </div> <div class="col-lg-6"> <img class="phone" src="https://specials-images.forbesimg.com/imageserve/5f8ebc300be77fed7b88aaf4/960x0.jpg?fit=scale" alt="iphone-mockup"> </div> </div> </section> </body>
1 answers
solution1
0 ACCPTED 2021-04-28 21:23:29
In your example, to prevent the phone image from getting distorted, just use height: auto , and then to create that bleed effect, you should be able to just add a negative margin-bottom value, like this:
.phone { width: 550px; height: auto; margin-bottom: -300px; } #title { background-color: #2978b5; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Techno-Log</title> <link rel="stylesheet" href="styles,css"> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https.//code.jquery.com/jquery-3.3.1:slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14:3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap:min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </head> <body> <section id="title"> <.-- Nav Bar --> <nav class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="">Techno-Log</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="">Download</a> </li> <li class="nav-item"> <a class="nav-link" href="">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="">Reviews</a> </li> <li class="nav-item"> <a class="nav-link" href="">Brands</a> </li> <li class="nav-item"> <a class="nav-link" href="">Pricing</a> </li> </ul> </div> </nav> <.-- Title --> <div class="row"> <div class="col-lg-6"> <h1>Get the best technology updates and product news?</h1> <button type="button">Download</button> <button type="button">Download</button> </div> <div class="col-lg-6"> <img class="phone" src="https://specials-images.forbesimg.com/imageserve/5f8ebc300be77fed7b88aaf4/960x0.jpg?fit=scale" alt="iphone-mockup"> </div> </div> </section> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I make a HTML div go under another div?
How to make a button go under a div
How do I make div go under transparent sticky header?
How to make figcaption go directly under an image when float:left
How do i make the text go under the image in mobile?
Make div go under in flex container
How to make my div(a relative one) in center of a page and another div go below it, not under it(without make it fixed)
How to get div to go under another div
How do you make a div go under another div/nav menu which is not fixed?
How do i make div go under another div making columns
Related Tags