javascript - img 调整大小，但宽度将停止在 600

Question

HTML

<div>
    <div style="overflow: auto">
        <img class="preview_img" src="/myImg" />
        <img class="preview_img" src="/myImg2" />
    </div>
</div>

JS

btnZoomIn.click(function () {
    previewImg.each(function () {
        var width = $(this).width();
        var height = $(this).height();

        var newWidth = width * 1.2;
        var newHeight = height * 1.2;

        $(this).css('width', newWidth);
        $(this).css('height', newHeight);
        // $(this).width(newWidth);
        // $(this).height(newHeight);
    });
});

我想在点击按钮时调整 img 的大小，宽度将停在 600px，

但高度可以无限增加。

我没有设置任何最大宽度属性(属性)

Answer 1

可能从其他元素继承max-width，所以添加内联样式来防止max-width规则:

previewImg.each(function () {
    $(this).css('max-width','none');
});

btnZoomIn.click(function () {

    previewImg.each(function () {
        var width = $(this).width();
        var height = $(this).height();

        var newWidth = width * 1.2;
        var newHeight = height * 1.2;

        $(this).css('width', newWidth);
        $(this).css('height', newHeight);
        // $(this).width(newWidth);
        // $(this).height(newHeight);
    });
});

然后，如果存在问题，请检查父级的 max-width 或 width。