圖像大小瀏覽器高度 - X像素數。 CSS-而已！

我正在尋找一種僅用於CSS的解決方案，將圖像縮小爲瀏覽器窗口的大小 - X個像素點。我發現了很多JavaScript解決方案，但是我想讓它成爲CSS。它可以做到，如果是的話，那麼如何？圖像大小瀏覽器高度 - X像素數。 CSS-而已！

2011-02-23 Ca-La

只需使用變焦屬性 – CarneyCode 2011-02-23 21:47:13

什麼問題[本]（http://jsfiddle.net/bqbGY /）？ – thirtydot 2011-02-23 21:47:47

將它放入一個200px右邊距的容器應該是正確的方法 – 2011-02-23 21:51:04

img { 
    width: 100%; 
}

多田！ :)

編輯：

div { 
    left: 0px; 
    margin: 15px; 
    position: absolute; 
} 
img { 
    position: relative; 
    width: 100%; 
}

凡在div margin屬性是x像素。顯然，這意味着將img包裹在div中。像這樣：再次

<div> 
    <img src="" /> 
</div>

編輯：剛一說明，而不是使用margin屬性，可以使用單獨的margin-left和margin-right性能。 :)

2011-02-23 21:47:32 Kayla

您錯過了'-X'像素部分。 – david 2011-02-23 21:49:47

@david：什麼部分？編輯：沒關係，我明白了。在原來的問題。 – thirtydot 2011-02-23 21:51:36

我同意缺少-x像素，但是它必須是唯一的css解決方案，我認爲這是最好的選擇。 OP可以將其改爲98％，45％等。 – Loktar 2011-02-23 21:52:01

這個怎麼樣？

HTML：

<div><img src="http://www.google.com/images/logos/ps_logo2.png" /></div>

CSS：

div { 
    position: absolute; 
    top: 30px; 
    left: 30px; 
    right: 30px 
} 
img { 
    width: 100% 
}

2011-02-23 22:00:17 thirtydot

爲什麼'position：absolute'？不應該有必要。不是'margin-right：100px'工作嗎？ – 2011-02-23 22:01:17

適用於我：http：// jsfiddle。net/mXSTQ/1 /（編輯：mmm，差不多，如果你的圖像寬度低於100像素，圖像會重置爲原來的大小，也許需要更多的微調） – 2011-02-23 22:01:46

也適用於我。我覺得我好笨。 – thirtydot 2011-02-23 22:02:49

回答