如何使用CSS3或HTML5在樣板中製作響應式的標題圖片？

<div class="sixteen columns"> 
<img src="images/shane10in.gif" alt="" />

，並希望它來填充寬度和縮小。我可以使它在HTML中以不推薦的寬度100％工作，但我試圖在CSS3或HTML5中找到一種新方法，可能是一個畫布？示例網站位於shaneofalltrades.com。

2011-08-04 Shane

HTML5可能已經過時的寬度，但沒有CSS3做到這一點？也許我很困惑。你到底想做什麼？填充屏幕的「整個」寬度並縮小圖像多少？你的意思是你的div被固定在940像素，並且你希望其中的圖像不止於此，並填滿整個屏幕。正確？？ – PhD

我只是想讓圖片填充960像素，100％，然後一切縮小到320像素。 – Shane

無關但仍然重要，你確實知道你實際上在div上聲明瞭** 2 **類而不是一個，'16「和'columns'類，這些類不能用空格分隔。 –

寬度：CSS中的100％不被棄用。它適用於HTML5，但不適用於CSS。這個想法是要有乾淨的HTML並通過CSS控制許多事情。

還是你想是這樣的：

.sixteen { 
    width: 960px; 
    height: 320px; 
} 

.sixteen img { 
    width: 100%; 
}

2011-08-04 19:45:08 fanfavorite

我將不得不多玩這個。出於某種原因，任何嘗試失敗的工作，但可能在我的語法，或者是我使用的瀏覽器......回到商店。 – Shane

這是我公司名稱的圖像，因此只需在所有尺寸的屏幕上以標題形式運行。 – Shane

我做了寬度：100％在你的標記，它工作正常。它跨越了。添加高度：320px使其真正拉伸。如果你想讓16位像素爲320像素，那麼你可以做到這一點，並讓img能夠覆蓋寬度：100％ – fanfavorite

回答