在CSS流佈局中自動調整圖像大小以模擬html表格佈局

Question

由於我已將其寬度和高度設置爲靜態，因此我根據屏幕分辨率將圖像放置在CSS流佈局的視線之外值。

在CSS流佈局中，有人在縮小瀏覽器窗口時自動調整圖像大小。我已經看到這在一個HTML表佈局完成，我認爲這些表使它成爲可能 - 有沒有辦法在CSS流佈局中做到這一點？

Answer 1

簡單的測試表明這一點：

img.test { width: 50%; } 

調整大小，你可能想要的方式：

<img class="test" src="testimage.jpg" /> 

聯合。該圖像盡職調整大小爲包含它的盒子寬度的50％，並且垂直調整大小，保持縱橫比。至於基於垂直變化的大小調整，它不會按照你喜歡的方式工作，至少不一致。我試過了：

img.test { height: 50%; } 

在目前的谷歌瀏覽器（2.0.172）中，它稍微不小心調整了大小;大小是正確的，但不會在每個窗口拖動後更新。在目前的Firefox（3.5）中，高度似乎完全被忽略。我沒有任何遠程近期的IE，Safari等進行測試。隨意編輯這些結果。即使那些做得好，它仍然可能是你想要避免的東西，並堅持寬度。

編輯： 爲此，所有包含img.test的元素都需要使用百分比進行大小設置，而不是靜態的。

認爲它是這樣的：

• 身體是窗口大小的100％。
• img是身體的50％。
• img是窗口大小的50％。

現在假設我添加一個div。像這樣...

<div class="imgbox" style="width: 100px;"> 
    <img class="test" src="testimage.jpg" /> 
</div> 

然後

• 身體是窗口大小的100％。
• div是100px，忽略身體寬度。
• img是div的50％。
• img是50px，與窗口大小無關。

如果div的寬度爲100％，那麼邏輯結果與以前一樣。只要它有一定的百分比，而不是固定的，你可以使用img上的百分比，並使其達到你想要的大小。

Answer 2

由於我的CSS是垃圾，因爲沒人回答，所以在圖像中設置一個寬度或高度或者兩者都是它的父母百分比。不知道？

Answer 3

嘗試將最大寬度設置爲95％。感謝方式，當容器寬度小於圖像寬度時，圖像會縮小。所有的父容器需要佐證

max-width:95%;