我正在用Boostrap制作静态视差网页，但是我的图像显示不正常。使用Bootstrap强制图像缩放
我有一个自定义样式表，并为每个子节中，我有一个不同的图像是这样的：
#LM-sub01{
background: url(../img/32-cover.jpg) no-repeat center;
color: #ffffff;
font-family: 'Lobster', cursive;
font-weight: 300;
font-size: 400%;
}
在一些路段会有onnly是文本短款比图像尺寸更小。我想要图像缩放到屏幕大小，但显示竞争形象。
您希望容器取得背景图片的大小，而不管内容是否填充容器。这样做有
例1个
使用实际图像的几种方法，位置上的容器position: relative包含被定位绝对任何子元素，然后设置为0四面八方内容position: absolute定位和overflow: auto
.example {
position: relative;
}
.example .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto
}<div class="example">
<img src="http://lorempixel.com/1200/768/" width="100%" />
<div class="content">
<h1> Hello World! </h1>
</div>
</div>实施例2
如果知道图像将是可以使用填充底部特技相同的尺寸，因为填充-top和填充底部时给定百分比值指的是宽度百分比，这又分别需要容器的相对和绝对定位。更改填充底部以适合您的宽高比。
.example {
position: relative;
background-image: url('http://lorempixel.com/1200/768/');
background-size: cover;
padding-bottom: 75%;
}
.example .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto
}
.<div class="example">
<div class="content">
<h1> Hello World! </h1>
</div>
</div>例3
如果你不知道的图像将是什么规模，你不希望使用第一种方法，你可以使用JavaScript的。你实际上找不到背景图像本身的高度，所以你必须做到以下几点。
function scaleToBg(queryString) {
this.elements = document.querySelectorAll(queryString);
for (var i = 0; i < this.elements.length; i++) {
var img = new Image();
img.src = window.getComputedStyle(this.elements[i], null).getPropertyValue("background-image").replace(/url\(|\)/g, '');
img.onload = function() {
this.parentNode.style.height = window.getComputedStyle(this, null).getPropertyValue("height");
};
img.className = "scaleToBgImg";
img.style.cssText = "position:absolute;left:-100%; width:100%;";
this.elements[i].appendChild(img);
}
this.resize = function() {
this.images = document.querySelectorAll(".scaleToBgImg");
for (var i = 0; i < this.images.length; i++) {
this.images[i].parentNode.style.height = window.getComputedStyle(img, null).getPropertyValue("height");
}
};
return this;
}
var scale = scaleToBg(".scaleToBg");
window.onresize = function() {
scale.resize();
};.scaleToBg {
background-size: cover;
background-repeat: no-repeat;
}
#scaleToBg1 {
background-image: url('http://lorempixel.com/1200/200/');
}
#scaleToBg2 {
background-image: url('http://lorempixel.com/1200/400/');
}
#scaleToBg3 {
background-image: url('http://lorempixel.com/1200/600/');
}
#scaleToBg4 {
background-image: url('http://lorempixel.com/1200/800/');
}<div class="scaleToBg" id="scaleToBg1"></div>
<div class="scaleToBg" id="scaleToBg2"></div>
<div class="scaleToBg" id="scaleToBg3"></div>
<div class="scaleToBg" id="scaleToBg4"></div>Background-size:cover;
是重新调整图像与容器一起股利
HTML
最好的选择<!doctype html>
<html>
<body>
...Your content goes here...
</body>
</html>
CSS
body {
/* Location of the image */
background-image: url(images/background-photo.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
OR 见下文 http://sixrevisions.com/css/responsive-background-image/
那是只是为了理解 – khurram
所以链接你想拉伸图像？长宽比不恒定的地方。 – Huey
不，不安静。例如，第一个图像是1920 x 2160.因此，我希望宽度缩放至屏幕宽度，然后将高度缩放至图像宽度。所以你可以看到完整的图像。 – Tom
是的，但如果原始图像是4：3，屏幕是16：9，那么会发生什么？ – Huey