css - 在不替换 HTML 宽度/高度属性的情况下自动调整 CSS 中的图像大小？

Question

我试图在不破坏布局的情况下使图像很好地适应不同的屏幕尺寸。以下 CSS 有助于:

.viewer .main img {
    max-width: 100%;
    height: auto;
}

但麻烦的是这张图片改变了。每次图像更改时，我都会使用一些 Javascript 创建一个新的 img 元素，而不是重复使用现有的元素。 (这对于我正在做的事情来说似乎更可靠一些)。浏览器在加载图像之前不知道图像的大小，这会在加载期间产生明显的闪烁。我通过在 HTML 中设置图像的宽度和高度属性来处理这个问题。 没有上述 CSS 规则，也能正常工作。

有了那个 CSS，闪烁仍然存在。出于某种原因，当我创建一个新的 img 元素时，CSS 似乎导致浏览器忽略其宽度和高度属性，所以。它最终像以前一样不知道纵横比。

这里有一个 jsfiddle 来说明这种情况: http://jsfiddle.net/7sDtN/ 其中一张图片非常大 (138 MB)，所以如果您使用按流量计费的连接，请小心 :)

我想要的是让图像根据我在 HTML 中设置的尺寸进行缩放。最好以一种好的方式。 Javascript 解决方案并不是世界末日(当然，我已经在使用它)，但如果有一个优雅的 CSS 解决方案，那就太好了。

Answer 1

我最终以一种迂回的方式解决了这个问题，方法是将图像包装在一个专用容器中，以及一些看起来很奇怪的 javascript 以在图像加载时将其保持在适当的位置。该容器的尺寸按照 Sven 的回答进行计算，但最终它让浏览器接管。通过这种方式，布局更改保持在相当小的水平，我们最终只会在图像之间的一小段时间内做这些疯狂的事情。

为了完整起见，这里有一大堆代码:

function Viewer(container) {
    var viewer = this;

    container = $(container);

    var pictureBox = $('.picture', container);
    var img = $('<img>').appendTo(pictureBox);

    var hide = function() {
        /* [snip] */
    }

    var getPictureDisplayHeight = function(picture) {
        var ratio = picture.data.h / picture.data.w;
        var displayWidth = Math.min(pictureBox.width(), picture.data.w);
        var displayHeight = Math.min(displayWidth * ratio, picture.data.h);
        return displayHeight;
    }

    var stopLoadingTimeoutId = undefined;
    var stopLoadingTimeout = function() {
        container.removeClass('loading');
    }

    var showPicture = function(picture) {
        var imgIsChanging = img.data('picture') != picture;

        container.show();

        /* This code expects to be cleaned up by stopLoadingTimeout or onImgLoaded, which will not fire if img src doesn't change */
        if (imgIsChanging) {
            container.addClass('loading');
            window.clearTimeout(stopLoadingTimeoutId);
            stopLoadingTimeoutId = window.setTimeout(stopLoadingTimeout, 3000);
        }

        pictureBox.css({
            'min-height' : pictureBox.height()
        });

        var displayHeight = getPictureDisplayHeight(picture);
        if (displayHeight > pictureBox.height()) {
            /* Grow pictureBox if necessary */
            pictureBox.stop(true, false);
            pictureBox.animate({
                'height' : displayHeight
            }, 150);
        }

        /* I wish I could set width and height here, but it causes the current image to stretch */
        img.attr({
            'src' : picture.fullPath
        }).data('picture', picture);
    }

    var onImgLoaded = function(event) {
        /* The load event might not be fired, so nothing here should be essential */

        var picture = img.data('picture');

        container.removeClass('loading');

        var displayHeight = getPictureDisplayHeight(picture);
        pictureBox.stop(true, false);
        pictureBox.animate({
            'min-height' : 0,
            'height' : displayHeight
        }, 150, function() {
            pictureBox.css('height', 'auto');
        });

        window.clearTimeout(stopLoadingTimeoutId);
    }

    var onImgClicked = function(event) {
        selectNextPicture();
    }

    var onPictureSelectedCb = function(picture) {
        if (picture) {
            showPicture(picture);
        } else {
            hide();
        }
    }

    var init = function() {
        img.on('click', onImgClicked);
        img.on('load', onImgLoaded);
    }
    init();
}

相关的 HTML:

<div class="viewer" style="display: none;">
    <div class="picture"></div>
    <div class="caption"><div class="caption-text"></div></div>
</div>

和 CSS:

.viewer .picture img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

这样我们在图像周围留出空间，它要么是下一个图像的大小，要么是当前图像的大小，而不是在加载新图像之前似乎发生的较小尺寸(由于某种原因一直发生).可能有上百万种解决方案，而我的解决方案并不是特别简单，所以我当然很想看看其他人:)