IE10 <SVG最大寬度不設置正確的比例

我已經準備了一個小提琴：https://jsfiddle.net/uj0uhkkq/1/IE10 <SVG最大寬度不設置正確的比例

<div class="papa"> 
    <img src="image.svg" /> 
</div> 

<style> 
.papa { 
    width: 250px; 
    height: 50px; 
} 
.papa>img { 
    max-width: 250px; 
    max-height: 50px; 
} 
</style>

在IE 10和下面的圖像看起來像這樣：

.. 。在任何其他「最近」瀏覽器svg具有正確的比例。

有什麼辦法可以解決這個IE 10及以下？如果不是也許Javascript可以計算尺寸？

（爲什麼我不只是設置SVG的實際高度和寬度???好，因爲我有客戶的IMG元素負載SVG-徽標動態 - 當然每個人都有不同的尺寸）

來源

2017-07-18 DavidDunham

刪除最大高度規則...縮放圖像的常見設計模式是將圖像的大小設置爲其父元素作爲perc ENT。例如。 ...指定要使用計算的自然寬高比渲染圖像的高度或寬度。 –

Rob。因爲svg可以比寬度或高度更寬或高於250px/50px的比率，所以將寬度或高度設置爲100％不起作用。你說「計算的自然長寬比」是什麼意思？（我說容器「爸爸」可以加載任何我不知道的svg大小） – DavidDunham

svg圖像的自然高度/寬度爲601x601（請參閱https://upload.wikimedia.org/wikipedia/commons/f/f4/I-8_%28AZ%29.svg的源代碼），即正方形...所以最大高度（或高度）和最大寬度（或寬度）規則必須相同才能保持縱橫比比率....

<div class="papa"> 
    <img src="image.svg" /> 
</div> 

<style> 
.papa { 
    width: 250px; 
    height: 50px; 
} 
.papa>img { 
    width: 50px; 
    margin:0 auto; 
} 
</style>

來源

2017-07-18 21:58:25

雖然這段代碼可能回答這個問題，但提供關於爲什麼和/或代碼如何回答這個問題的附加上下文會提高它的長期價值。 –

papa元素的高度必須最大爲50px，最大寬度爲250px（根據我的初始問題），並且svg需要按比例縮放。你的答案不是這樣的：https：//jsfiddle.net/uj0uhkkq/6/ – DavidDunham

IE10 <SVG最大寬度不設置正確的比例

回答

相關問題