Question

这个小提琴适用于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");
}

但是，如果我去检查员并刷新高度属性（取消选中/检查）它可以工作......

Answer 1

它对我来说也不起作用（在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以对齐图片

Answer 2

下面的代码工作得很好......

<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'
  })

}

图片无法在Chrome（小提琴）中正确调整大小

2 个答案: