Zoom or crop a background image instead of stretching it
Question
I have a background image which takes the full width of the browser window. This background image should have a fixed height, lets say 500 px.
I'm trying to get this image to be as complete as possible when its aspect ratio is close to the one of the browser window, and then to zoom or crop on a part of the image (middle for example) rather than stretching it or displaying just a side of it when the browser window gets larger.
Here is an example of what I am trying to get:
Here is a Fiddle with how it is working currently: https://jsfiddle.net/bb61c412/
And here is the current HTML code:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="navbar navbar-default navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">website</a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> <span class="icon-bar"></span> </button> </div> </div> </div> <div style="width:100vw; height: 500px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/80/Paul_Gauguin_088.jpg); background-repeat: no-repeat;"> </div>
3 answers
solution1
1 2016-03-10 13:32:44
Add background-size:cover thats it
solution2
1 ACCPTED 2016-03-10 13:48:31
As @theblackgigant said you have to set background-size property to ' enter code here cover. You can also set background-position: bottom center to have the right behavior https://jsfiddle.net/bb61c412/2/
solution3
1 2016-03-10 13:53:55
Your code should be like this :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">website</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div style="width:100vw; height: 677px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/80/Paul_Gauguin_088.jpg); background-repeat: no-repeat;background-size:cover">
</div>
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.