缩放或裁剪背景图像而不是拉伸它
[英]Zoom or crop a background image instead of stretching it
问题描述
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. 此背景图像应具有固定高度，例如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/ 这是一个当前如何工作的小提琴： https ： //jsfiddle.net/bb61c412/
And here is the current HTML code: 这是当前的HTML代码：
<!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 个解决方案
解决方案1
1 2016-03-10 13:32:44
Add background-size:cover thats it 添加background-size:cover它
https://jsfiddle.net/bb61c412/1/ https://jsfiddle.net/bb61c412/1/
解决方案2
1 已采纳 2016-03-10 13:48:31
As @theblackgigant said you have to set background-size property to ' enter code here cover. 正如@theblackgigant所说，你必须将background-size属性设置为' enter code here封面。 You can also set background-position: bottom center to have the right behavior https://jsfiddle.net/bb61c412/2/ 您还可以设置background-position: bottom center以使其具有正确的行为https://jsfiddle.net/bb61c412/2/
解决方案3
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.