使用CSS按比例縮放圖像

Question

我正在進行流暢的版式設計，但無法縮放圖像。 我最近一直在使用絕對寬度和高度，但這在許多情況下都會引起問題。

我的原始圖片是1642px寬x 760px高。

有沒有辦法做一些涉及百分比的事情，就像您可以在Photoshop中按比例縮放圖像一樣？ 假設我希望圖像的高度與容器的高度相同，但是在這種意義上，寬度應成比例。

Answer 1

您只需要指定圖像高度，寬度就會成比例地縮放。

img{
    height:100px;
}

在http://jsfiddle.net/jncnE/上查看工作示例

Answer 2

即使使用！important，也沒有任何變化。 僅指定高度限制會擠壓圖像，寬度不會縮放，反之亦然。

我在這里找到另一個線程的解決方案。 您必須根據需要將一維設置為自動。

.containerName {
width: auto;
height: 150px !important;
}

我使用重要的參數來覆蓋無法更改的其他設置。