圖像在最小級別停止縮放bootstrap-responsive.css

我正在使用Twitter Bootstrap創建我的第一個網站，並且試圖瞭解爲什麼我的網頁上的徽標圖像在屏幕大小達到一定程度時會停止縮放和跳轉足夠小的尺寸。圖像在最小級別停止縮放bootstrap-responsive.css

當前的行爲使得該網站在iPhone上看起來非常可怕。

圖像文件本身是一個200×500像素.gif注意

下面是與它的代碼的jsfiddle：http://www.jsfiddle.net/eugip9/uyGH9

，這裏是從它在div代碼：

<div class="row"> 
    <div class="span1"> 
    <img src="./HomePage/logo-02.gif" center alt> 
    </div> 
    <div style="text-align:left;padding-top: 5em;text-indent: 5em;"; class="span11"> 
     <h1>Site Title</h1> 
    </div> 
</div>

圖像很好地擴展到一個點，但是一旦屏幕變得足夠小的圖像可以追溯到200像素X 500像素

我使用的是默認的靴子trap-responsive.css

來源

2013-04-23 Evan

這種類型的問題更好用這樣的JsFiddle：http://jsfiddle.net/eugip9/uyGH9/ – Pigueiras 2013-04-23 06:47:24

當屏幕小於767像素時，每個跨度都有100％的寬度。所以，由於主題的每個圖像都具有max-width: 100%屬性，因此當屏幕小於767像素時，圖像的大小將會調整。

我建議您使用Photoshop（或類似的）將圖像大小調整爲所需的寬度。用CSS調整圖像大小並不總是一個好主意。如果你不想這樣做，只需在圖片上添加一個id，然後將max-width: 64px添加到該圖標。

來源

2013-04-23 06:52:09 Pigueiras

感謝您的迴應。有沒有更好的方法來製作一個標題欄，在標題欄的左上角顯示1，然後標題顯示爲span11？否則，在iphone上，它們會始終垂直疊放，對嗎？ – Evan 2013-04-23 07:25:59

@Evan如果您不想在任何佈局中堆疊徽標，請在圖像上放置一個「左拉」類，並將標題和圖像置於相同的'div.span12'中。我相信如果將圖像調整爲較小的尺寸，應該完成這項工作。 – Pigueiras 2013-04-23 08:29:18

非常感謝。 CSS對我來說仍然是一種學習體驗。 – Evan 2013-04-23 09:42:12

圖像在最小級別停止縮放bootstrap-responsive.css

回答

相關問題