Q

Twitter BootStrap背景圖片

2012-12-04 167 views 2 likes

2

我有一個固定的導航欄在頂部和一個全寬span12的背景容器。但由於背景圖像的內容對於視覺提示的佈局至關重要。無論窗口大小如何，我都希望顯示整個圖像。Twitter BootStrap背景圖片

這是構建圖像或圖像集以實現相同效果的最佳方法。

大型監視器

enter image description here

中監控

enter image description here

小尺寸

enter image description here

我有一個窗體將顯示在圖像的右側。因此，讓我對圖像起作用有點棘手。

鏈接：play.mink7.com/minkstock/

2012-12-04 Harsha M V

+0

你可以發佈一個jsFiddle嗎？ –

+0

@OliverAtkinson已添加鏈接play.mink7.com/minkstock/ –

A

回答

3

如果我理解正確，您只需擁有圖片可以達到的最大尺寸（或百分比）即可。嘗試，而不是背景圖片，採用了<img>元素，像這樣：

img{ 
    max-width: 100%; /* or any other value */ 
    height: auto; 
}

2012-12-04 18:24:43

1

是否有您選擇使用CSS設置背景圖片的原因嗎？

如果我改變＃着陸頁-BG div來

<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;"> 
    <img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg"> 
</div>

它產生你想要的理想效果（減去你設置一些紅色背景）。

如果您想要覆蓋圖像上的項目，可以使用相對div定位。

2012-12-04 18:21:13

+0

所以如果我有一個完整的span12在任何時候。大圖像是否會改變其大小以適合正確的尺寸？ –

+0

@HarshaMV正確，您放置該行的容器類是一個固定響應的佈局，並具有媒體查詢以支持其內容 –

1

像做background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat;爲小型媒體查詢。

2012-12-04 18:24:59 runningRhetoric

相關問題