如何在twitter-bootstrap中停止圖像響應？

我使用twitter bootstrap製作響應式佈局。它的工作原理非常棒。如何在twitter-bootstrap中停止圖像響應？

它使圖像響應太快。我需要一些圖片只需要固定寬度和高度。

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"></div>

我該如何做到這一點？

來源

2012-10-04 LoganPHP

我不認爲寬度=「50」高度=「40」將驗證除非你有一臺時間機器回到1994. –

@PJBrunet以及爲什麼'

@MilchePatern因爲我非常確定這是被認爲已過時的HTML 1.x樣式代碼。我推薦使用CSS來調整圖像大小。也許「width =」被舊的電子郵件閱讀器使用，無法處理CSS，這是不幸的。 –

終於工作了。

.fixed_width { 
    height: 40px; 
    width: 50px; 
} 

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" class="fixed_width" ></div>

來源

2012-10-05 05:38:03 LoganPHP

哦，不錯。這比我的解決方案簡單 – hajpoj

你確定這有效嗎？ –

創建一個新類，並將最小高度和最小寬度設置爲等於您不想縮小的圖像的寬度和高度，然後將該類添加到這些圖像。

例如。

/* css */ 
img.no-resize { 
    min-height: 40px; 
    min-width: 50px; 
} 

/* html */ 

<div class="span1"> 
    <img class="no-resize" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"> 
</div>

來源

2012-10-05 02:53:04 hajpoj

我真的希望這不是「正確」的方式來做到這一點。首先，一堂課是爲了影響多個項目。 Ids是針對特定更改的，如調整一個特定圖像。但更讓我困擾的是：不是獨自留下一張圖片（沒有樣式），而是通過Bootstrap進行搭配，然後你很奇怪地對Bootstrap進行反向工程以消除損壞 - 這看起來不是一個優雅的解決方案。這不是忘記最大寬度和最大高度？ –

檢查你的代碼，確保通過設置圖像的寬度和高度屬性like you did它不工作並且在造型的干涉來解決：

<div class="span1"> 
    <img height="40" width="50" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" /> 
</div>

您的圖片是不應該一起調整Bootstrap如果您正確填寫寬度和高度屬性。內聯屬性優先於CSS。

否則，您必須覆蓋從bootstrap.css的IMG造型

img { 
    /* Responsive images (ensure images don't scale beyond their parents) */ 
    max-width: 100%; 
    /* Part 1: Set a maxium relative to the parent */ 
    width: auto\9; 
    /* IE7-8 need help adjusting responsive images */ 
    height: auto; 
    /* Part 2: Scale the height according to the width, otherwise you get stretching */ 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
}

您的要求創建一個CSS選擇器（線〜68 2.0版。）：

/* css */ 
.max-resize-50x40 { 
    max-height: 40px; 
    max-width: 50px; 
} 
.resize-50x40 { 
    height: 40px; 
    width: 50px; 
}

來源

2013-01-11 16:32:27

「*如果您正確填寫寬度和高度*，您的圖像不應該使用Bootstrap調整大小*」 - Fwiw，至少在Bootstrap v3.3的Chrome 53.0.2785.116 m中。如圖7所示，如果瀏覽器窗口小於圖像，則即使明確設置了「height」和「width」，圖像也將調整大小（清楚地說，沒有其他與CSS相關的更改 - 進一步設置「min -width'和height在較小的調整大小時保持靜態。） – ruffin

-1

就更簡單了，你應該能夠在圖像中添加一個通用類，以便您可以在多種圖像尺寸上使用它...

/* html */ 
<img src="image.jpg" alt="An image" class="fixed-size" /> 

/* css */
img.fixed-size { height: auto; width: auto; }

我沒有在IE中試過它，但它可以在Safari，FF和Chrome上運行。

來源

2013-09-10 05:16:52 atype

-1

要添加到發佈的@atype我會放的答案如下：

/* html */ 
<img src="image.jpg" alt="An image" class="fixed-size" /> 

/* css */
img.fixed-size { height: auto !important; width: auto !important; }

來源

2015-09-23 18:09:22 trev

如何在twitter-bootstrap中停止圖像響應？

回答

相關問題