圖片在Chrome中不能正確調整大小（小提琴）

這個小提琴在firefox上可以使用，但不能在chrome上使用。此圖像不保持寬高比：圖片在Chrome中不能正確調整大小（小提琴）

<body style="height:100%;margin:0"> 
<div id="dvMain" style="width:100%;height:200px;border:1px dashed gray;text-align:center"> 
    <img id="imgMain " src="http://lorempixel.com/output/fashion-q-c-987-804-9.jpg" style="display:inline-block;height:auto !important;width:auto;max-height:100% " /> 
</div> 

<span onclick="rez();">Click me</span>

function rez(){ 
    $("#dvMain").css("height", "50px"); 
}

但是如果我去檢查並刷新height屬性（取消/檢查）它的工作原理...

來源

2013-07-23 Joaozinho das Couves

它似乎爲我工作在Chrome 26。 .. – DarkAjax

如果你使用jQuery，你可以使用'click'事件。順便說一下，它也適用於Chrome 28。你的意思是圖像不能保持它的比例？ – Brewal

是的，它不適用於Chrome 28 – Roopendra

它也不適用於我（在Chrome 28上），但將代碼更改爲

<body style="height:100%;margin:0"> 
    <div id="dvMain" style="width:100%;height:200px;border:1px dashed gray;text-align:center"> 
     <img id="imgMain" src="http://lorempixel.com/output/fashion-q-c-987-804-9.jpg" 
      style="display:block;height:auto !important;width:auto;max-height:100%;margin: 0 auto;" /> 
    </div> 

    <span onclick="rez();">Click me</span> 
</body>

它保持高寬比。

在圖像CSS我改變了display: inline-block到display: block，並添加margin: 0 auto居中對齊圖像

來源

2013-07-23 14:15:12 graham

您應該精確地將'inline-block'改爲'block'。這並不明顯。 – Brewal

對不起，以爲你可以比別人更容易地看到你的代碼的變化，將更新 – graham

這不是我的，這是公開的。它可以幫助其他人:) – Brewal

下面的代碼工作太細...

<body style="height:100%;margin:0"> 
    <div id="dvMain" style="width:100%;border:1px dashed gray;text-align:center"> 
     <img id="imgMain" src="http://lorempixel.com/output/fashion-q-c-987-804-9.jpg" style="height:150px; display:inline-block;" /> 
    </div> 

    <span onclick="rez();">Click me</span> 
</body> 

function rez(){ 
    $("img").animate({ 
     height:'50px' 
    }) 

}

來源

2013-07-23 14:41:15

圖片在Chrome中不能正確調整大小（小提琴）

回答

相關問題