CSS - 當寬度會迫使它變形時，保持高度爲100％的圖像比例？

我有一個圖像，其高度設置爲100％。只要有足夠的寬度，這將使圖像正確顯示，正如我所期望的那樣。但是，當屏幕寬度減小時，圖像最終會丟失比例，因爲寬度被壓扁而高度仍然保持100％。我希望將圖像始終伸展到容器內的最大尺寸，而不會損失比例。換句話說，它的寬度是限制因素，圖像應該使用100％的寬度和保持率，但是如果高度是限制因素，那麼圖像應該使用100％的高度，同時保持它的比例，它應該能夠在這些之間切換。有沒有一種方法可以純粹在CSS中執行此操作？謝謝！CSS - 當寬度會迫使它變形時，保持高度爲100％的圖像比例？

來源

2014-01-20 Jenny Shoars

你說的是全屏圖像嗎？我們可以看到一些HTML嗎？ – davidpauljunior

'height：auto'會保持寬高比......但是你想要通過高度還是寬度來拉伸......兩者都不能用css來完成！ – NoobEditor

@NoobEditor：所以沒有辦法設置它，以便CSS會決定高度還是寬度是限制因素，並將其展開？你是說我不得不使用JS？ –

這應該保持正確的比例（假設您不需要需要由於某種原因將高度設置爲100％）。

img{ 
    width: 100%; 
    height: auto; 
}

- 編輯 -

如果您想保留父元素一致的高度，那麼你可以：

隱藏使用overflow: hidden;四溢的圖像。雖然這意味着你將失去一些較大的圖像。 See example.
使用max-width和max-height停止圖像在某一點增長。這意味着您可能會在設計中留下一些空白區域。 See example.

來源

2014-01-20 10:45:56 Stuart

儘管如此，如果容器的高度小於圖像的高度，圖像只會伸出容器。他們是否有辦法確保高度還會限制圖像的大小並保持比例？ –

有幾種方法可以解決您的問題： 1.您可以定義圖像容器div的高度並將其設置爲「overflow：hidden;'。這樣做會隱藏當圖像大尺寸時溢出 - 顯然你會失去一些圖像。 [示例1]（http://jsfiddle.net/g7y5J/2/） 2.您可以在圖像上使用'max-width'和'max-height'來阻止它在達到所需的最大值時放大大小 - 儘管這可能會在您的頁面上留下一些空白區域。 [例2]（http://jsfiddle.net/g7y5J/1/）。如果這些有助於病毒更新 – Stuart

CSS - 當寬度會迫使它變形時，保持高度爲100％的圖像比例？

回答

相關問題