1

このフィドルは、Firefox では機能しますが、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");
}

しかし、インスペクターに移動して高さのプロパティを更新すると（チェックを外す/チェックを外す）、機能します...

4

2 に答える 2

3

私も（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-23T14:15:12.140 に答える
1

以下のコードも正常に動作します...

<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-23T14:41:15.723 に答える