stackoom
  简体   繁体   中英

How can I make my background image 'img-responsive'?

 原文  2017-03-21 00:23:56  7   3    html/ css

Question

I was wondering how can I make my background image using bootstrap 'img-responsive'? The background image is with in hero div 

 <!DOCTYPE html> <html> <head> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Liam Docherty Digital Portfolio</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <style> body { margin: 0; padding: 0; } .navbar.navbar-default { background-color: #4D5061; height: 10vh; z-index: 100; } .navbar.navbar-default ul { list-style-type: none; text-align: right; } .navbar.navbar-default ul li { display: inline-block; } .dropdown-menu li { text-align: center } .dropdown .dropdown-menu { background-color: #4D5061; } .dropdown .dropdown-menu a { color: white; } .navbar.navbar-default ul li a { display: inline-block; padding: 3.5vh 8px 4px; color: white; text-decoration: none; font-size: 14pt; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul li:after { content: ''; position: absolute; right: 50%; bottom: 0; left: 50%; height: 3px; background-color: #FFFFFF; border-radius: 9px; transition: all .2s; } .navbar.navbar-default ul li a:hover { color: white; } .nav.navbar-nav, .nav.navbar-nav>li { float: none; } .navbar.navbar-default ul li:hover:after { right: 0; left: 0; } .nav-title { font-size: 14pt; margin: 0; top: 35px; left: 50px; width: 100%; position: absolute; text-align: center; color: white; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul.dropdown-menu li, .navbar.navbar-default ul.dropdown-menu li a { position: relative; display: block; } #logo { padding-top: 2vh; padding-left: 20px; float: left; } .hero { background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg"); background-attachment: fixed; position: relative; text-align: center; width: 100%; max-width: 100%; width: 100vw; height: 100%; } section { position: relative; height: 95vh; } .section1 { height: 100vh; text-align: center; color: white; } .section2 { background-color: #11B5E4; text-align: center; color: white; } .section3 { background-color: #FFFFFF; text-align: center; color: white; } .fa-angle-down { color: #4D5061; position: absolute; bottom: 0px; } .fa-angle-up { color: #4D5061; position: absolute; bottom: 0px; } .footer { height: 6vh; background-color: #4D5061; padding: 0; right: 0; bottom: 0; left: 0; } .footertext { font-size: 14pt; color: white; font-family: 'Roboto', sans-serif; text-align: center; } .profile.box { bottom: 0; height: 50%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 50%; } .shape { border-radius: 25px; background: #4D5061; content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg); color: white; height: 250px; margin: auto; padding: 3px; width: 250px; } .shape2 { background: linear-gradient(35deg, #4D5061, #4D5061); border-radius: 85px; color: white; height: 40px; margin: 1% auto; opacity: 0.9; padding: 0px; width: 250px; } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a> <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#section3">Contact</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li><a href="#">Clients</a> </li> <li><a href="#contact-me">Contact Me</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <section id="section1" class="section1"> <div class="hero"> <div class="profile box"> <div class="shape"></div> <div class="shape2"> <p>kjjjjjjjjjkjjjkkjkj</p> </div> </div> </div> <a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a> </section> </html>

3 answers

solution1
 3 ACCPTED  2017-03-21 00:28:24

Use background-size: cover

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

cover - A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

Alternatively you might try contain depending on your desired behavior, but from the looks of your portfolio, cover is what you want

contain : A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.

* edit - also added background-position: center center; background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; in the shorthand background property for .hero since from the looks of your portfolio, you want those. 

 <!DOCTYPE html> <html> <head> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Liam Docherty Digital Portfolio</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <style> body { margin: 0; padding: 0; } .navbar.navbar-default { background-color: #4D5061; height: 10vh; z-index: 100; } .navbar.navbar-default ul { list-style-type: none; text-align: right; } .navbar.navbar-default ul li { display: inline-block; } .dropdown-menu li { text-align: center } .dropdown .dropdown-menu { background-color: #4D5061; } .dropdown .dropdown-menu a { color: white; } .navbar.navbar-default ul li a { display: inline-block; padding: 3.5vh 8px 4px; color: white; text-decoration: none; font-size: 14pt; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul li:after { content: ''; position: absolute; right: 50%; bottom: 0; left: 50%; height: 3px; background-color: #FFFFFF; border-radius: 9px; transition: all .2s; } .navbar.navbar-default ul li a:hover { color: white; } .nav.navbar-nav, .nav.navbar-nav>li { float: none; } .navbar.navbar-default ul li:hover:after { right: 0; left: 0; } .nav-title { font-size: 14pt; margin: 0; top: 35px; left: 50px; width: 100%; position: absolute; text-align: center; color: white; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul.dropdown-menu li, .navbar.navbar-default ul.dropdown-menu li a { position: relative; display: block; } #logo { padding-top: 2vh; padding-left: 20px; float: left; } .hero { background: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg") center center no-repeat;; background-attachment: fixed; position: relative; background-size: cover; text-align: center; width: 100%; max-width: 100%; width: 100vw; height: 100%; } section { position: relative; height: 95vh; } .section1 { height: 100vh; text-align: center; color: white; } .section2 { background-color: #11B5E4; text-align: center; color: white; } .section3 { background-color: #FFFFFF; text-align: center; color: white; } .fa-angle-down { color: #4D5061; position: absolute; bottom: 0px; } .fa-angle-up { color: #4D5061; position: absolute; bottom: 0px; } .footer { height: 6vh; background-color: #4D5061; padding: 0; right: 0; bottom: 0; left: 0; } .footertext { font-size: 14pt; color: white; font-family: 'Roboto', sans-serif; text-align: center; } .profile.box { bottom: 0; height: 50%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 50%; } .shape { border-radius: 25px; background: #4D5061; content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg); color: white; height: 250px; margin: auto; padding: 3px; width: 250px; } .shape2 { background: linear-gradient(35deg, #4D5061, #4D5061); border-radius: 85px; color: white; height: 40px; margin: 1% auto; opacity: 0.9; padding: 0px; width: 250px; } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a> <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#section3">Contact</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li><a href="#">Clients</a> </li> <li><a href="#contact-me">Contact Me</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <section id="section1" class="section1"> <div class="hero"> <div class="profile box"> <div class="shape"></div> <div class="shape2"> <p>kjjjjjjjjjkjjjkkjkj</p> </div> </div> </div> <a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a> </section> </html>

solution2
 0  2017-03-21 00:30:36

You can try 

<div>
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</div>

Source: Make an image responsive - simplest way

solution3
 0  2017-03-21 00:37:09

I personally use Jquery's Backstretch. The code is responsive and easy to plug in by using: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

And then adding the style/image to a .css doc like so: 

<style>
.content-wrapper {
    /* This image will be displayed fullscreen */

    background: url('http://site.rockbottomgolf.com/blog_images/Hole%2012%20-%20Imgur.jpg') no-repeat center fixed;

    scroll-x /* Ensure the html element always takes up the full height of the browser window */ min-height: 100%;
    /* The Magic */
    background-size: cover;
}
</style>

EDIT!! - I posted a link to Jquery but not the actual responsive backstretch plugin. Note you must keep the required script above and then add backstretch following it since it is a dependency. Download The Backstretch Plugin Here

You would then add the script as follows: 

<script src="example.com/relative-Path/jquery.backstretch.min.js"></script>

暂无
暂无

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 my website responsive using bootstrap? img-responsive / columns not working img-responsive not reducing the size of image in Bootstrap 3 How to add the img-responsive class in javascript How do I make a container take up the full row height and scale responsively with img-responsive images in the same row Showing a portion of an image using css but having it responsive with img-responsive I'd like to resize <div> area while an image is resized by “img-responsive” of Bootstrap How to add border on img-responsive or img-circle Images of various sizes and img-responsive - how to set a responsive div? Image extends beyond the parent in Twitter Bootstrap in spite of `img-responsive` Is there a way to adjust the height and width of an image that is img-responsive?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM