2014-10-01 87 views
-2

我正在製作一個項目,在其中使用Google+等封面圖片。 約全屏顯示,但是當我上傳小尺寸圖片或非常大尺寸的圖片時,它會在預覽中拉伸或壓縮。解決圖片鏈接

簡單的標籤我使用,以適應我的盒子是
<img src="coverphotos/1291384_4846629064030_1548133592_o.jpg" height="530px" width="1024px" style="border-width: 0px; margin-top:-4px">

非常非常重要的。我想爲自己的項目製作一張封面照片,但由於其伸展性和使圖片醜陋,Facebook,Google +上傳封面圖片時沒有拉伸,所以我感到惱火。

預覽。 http://www.tiikoni.com/tis/view/?id=479959b

我不希望它得到STRECH,而在FB上載與谷歌及其作品OSM

+0

我們可以看到一些標記嗎?僅憑這一點就很難評估除了其他人已經提供的其他選項。 – Bradley 2014-10-01 18:14:43

+0

http://www.tiikoni.com/tis/view/?id=479959b – Jenni 2014-10-01 18:20:36

回答

0

根據你的鏈接,這個CSS固定的問題。

body { 
width:100%; 
margin: 0; 
} 

center { 
width:100%; 
} 

center img { 
width:100%; 
height: auto; 
} 
+0

如果我把高度:自動;否則它會溢出,其他div將開始瘋狂行爲:P。我只是想不要溢出它,不拉伸.. – Jenni 2014-10-01 18:26:41

+0

在這種情況下,無論你想要的高度,將中心設置爲明確的高度,所以center {width:100%; height:530px; overflow:hidden;}隱藏的溢出將會阻止圖像進一步發展,另外一種選擇是將圖像設置爲中心的背景圖像並將其設置爲背景大小:封面,這將是最好的方式來達到你所尋找的效果 – Bradley 2014-10-01 18:28:36

+0

是的,謝謝你真棒。你也可以給一些教程或鏈接改變背景位置請 – Jenni 2014-10-01 18:37:13

1

要麼設置height530px或設置width100%,不做都在一起。

圖片不會被拉伸並保持其寬高比。 :)

+0

我不能設置其高度自動:( – Jenni 2014-10-01 18:12:51

1

此:height="530px" width="100%"

你說的是照片拍攝其母公司的整個寬度,並正好530px高。你可能想要的是圖像上的高度不受限制,但是其父母的高度限制爲overflow: hidden

看看這篇文章:Perfect Full Page Background Image

+0

什麼解決方案呢 – Jenni 2014-10-01 18:10:00

+0

我不能設置其高度自動:( – Jenni 2014-10-01 18:12:29