顯示圖像全尺寸的CSS

我想在我的博客全尺寸顯示此圖像：http://i.imgur.com/BruV8Hk.jpg 顯示圖像全尺寸的CSS

然而，它也會被剪裁...我不知道爲什麼。我試圖重新檢查.header邊界，我看不到我將限制圖像的可用尺寸。

這裏是codepen的網站：http://codepen.io/anon/pen/grLED

請幫

編輯：

只是爲了澄清..我想我.header容器足夠大的房子中充滿了圖像

編輯2：

，所以我只是做了這一點：http://codepen.io/anon/pen/vJyFn得到d esired的結果...可以做到沒有所有這些<br>？

來源

2014-09-25 sukhvir

添加'背景尺寸：蓋;''到.header' – Ruddy 2014-09-25 07:59:44

更多鈔票[重複]（http://stackoverflow.com/questions/18901819/how-to-show -full-height-background-image） – Benjamin 2014-09-25 08:00:05

使用'background-repeat：no-repeat;'和'background-position：center center;' – Fergoso 2014-09-25 08:11:34

將這些屬性添加到您的.header類。但我不確定這是否會在舊版瀏覽器中運行。

background-repeat: no-repeat; 
background-position: center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

更新

如果你的身高不到圖像的高度，你將失去尺寸比例。在這種情況下，你的圖像會被拉長。如此處所述，您可以像這樣定義寬度和高度background-size: 300px 150px;。

此外，您可以使用cover和contain選項與background-size屬性。由於您的容器高度小於此圖像，您必須依賴此設置的寬度高度螺絲背景圖像。

欲瞭解更多參考請參閱此link。

來源

2014-09-25 07:58:15 Bilal

它仍然沒有顯示完整的圖像..這裏是編輯的codepen與你的建議：http://codepen.io/anon/pen/Loect – sukhvir 2014-09-25 08:02:11

答案更新.. – Bilal 2014-09-25 08:12:00

哪個'高度'你指的是？我的''.header'部分的高度設置爲'100％'... – sukhvir 2014-09-25 08:13:19

嘗試設置背景大小。

/* Always cover the container (not a lot of support) */ 
background-size: cover;

或者

/* Fit width */ 
background-size: 100% auto;

另外，如果你想的div裏面絕對沒有裁剪，你可以將其設置爲「包含」或「汽車100％」，以適應高度。

希望有所幫助。 :)

來源

2014-09-25 07:58:58 JakeSidSmith

那一個沒有做任何事情 – sukhvir 2014-09-25 08:01:43

您是否需要圖像才能在此鏈接中顯示？

http://codepen.io/anon/pen/grLED

body{ 
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/ 
font-size:100%; 
font-family: 'Maven Pro', sans-serif; 
line-height:1.4em; 
min-height:100%; 
/*padding-left: 5%;*/ 
background: url('http://i.imgur.com/BruV8Hk.jpg'); 
    background-repeat:no-repeat; 
}

來源

2014-09-25 08:05:20

沒有...我需要它顯示完整的圖像 – sukhvir 2014-09-25 08:06:22

你發佈的鏈接..是我貼在我原來的帖子..如果你有任何修改文件..在頂部按'叉'，併發布新的網址 – sukhvir 2014-09-25 08:07:25

嘗試使用'background-size：auto 100％;' – 2014-09-25 08:10:40

我做了一個小例子給你，看看這個Link它可以幫助你走出

有一個叫做CSS3屬性

background-size:cover;

這將做魔術:)

更多的信息通貨膨脹可以在這裏找到：http://www.w3schools.com/cssref/css3_pr_background-size.asp

來源

2014-09-25 08:10:17 ThatMSG

您是否介意對我的代碼筆進行更改，以查看它是否可以正常工作 – sukhvir 2014-09-25 08:12:00

點擊查看 - > http://codepen.io/anon/pen/ulDhf – ThatMSG 2014-09-25 08:14:38

好的，您錯過了點...我不希望該圖像成爲整個網站的背景......我只是希望它成爲'.header'容器的背景。請參閱編輯原始問題 – sukhvir 2014-09-25 08:16:05

.responsive { 
    max-width: 100%; 
    height: auto; 
}

來源

2018-03-08 10:03:48 ancevinz

顯示圖像全尺寸的CSS

回答

相關問題