我正在用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