调整图像大小以适合父 CSS/Bootstrap
[英]resizing the image to fit the parent CSS/Bootstrap
问题描述
I have a html and a CSS file where I set the background of the body tag to background-image: url(..);
我有一个 html 和一个 CSS 文件，我将 body 标签的背景设置为background-image: url(..); HTML HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="public/css/coreStyleSheet.css">
<link rel="stylesheet" href="public/css/animate.css">
<script src="public/js/coreHomePage.js"></script>
<link rel="stylesheet" href="assests/font-awesome-4.7.0/css/font-awesome.min.css"> </head>
<body>
<nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="lines"></span><span class="lines"></span><span class="lines"></span></button>
<h1 class="navbar-brand mb-0 move-header">NavBrand</h1>
<div class="collapse animated fadeInLeft" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
</ul>
</div>
</nav>
<div class="container">
<div class="row"></div>
</div>
</body>
</html>
CSS CSS
body {
background-image: url(../../assests/img/back.jpg);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
The real issues start when I start resizing the window,the image start resizing well and good when it time for the image to resize the height there is lot of distortion in the image like some apart of the image move and some stays still.当我开始调整窗口大小时，真正的问题就开始了，当图像调整高度时，图像开始很好地调整大小，图像中有很多失真，例如图像的某些部分移动而有些则保持静止。 I could show you but I am not able to capture the screen.我可以给你看，但我无法捕捉屏幕。 But when I run in the JSFIDDLE it works fine.但是当我在JSFIDDLE 中运行时它工作正常。 there is media queries in my code which comes after the body tag.我的代码中有媒体查询出现在 body 标签之后。
PS:Using bootstrap4 PS：使用bootstrap4
1 个解决方案
解决方案1
1 已采纳 2017-01-20 18:42:07
Resizing the window while preserving the background image properly has always worked for me using this syntax, especially using Bootstrap.使用这种语法在正确保留背景图像的同时调整窗口大小一直对我有用，尤其是使用 Bootstrap。
html {
background: url(../../assests/img/back.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This fixes and centers the background as the window is resized.这会在调整窗口大小时修复背景并使背景居中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.