Question

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

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

但麻烦的是这张图片更改。每次图像更改时，我都会使用一些Javascript来创建一个新的img元素，而不是重用现有的元素。（对于我正在做的事情，这似乎更可靠）。浏览器在加载之前不知道图像的大小，在此期间会产生明显的闪烁。我通过在HTML中设置图像的宽度和高度属性来解决这个问题。没有上面的CSS规则，这很好。

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

这是一个说明情况的方法： 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;
}

这样我们就可以在图像周围留出空间，这个空间要么是下一个图像的大小，要么是当前图像的大小，并且永远不会出现在加载新图像之前出现的较小尺寸（由于某种原因这种情况不断发生））。这可能有一百万种解决方案，而我的感觉并不是特别直白，所以我当然很想看到其他人：）

Answer 2

如果我理解正确，您可以使用以下代码

来实现目标

HTML

<div id="Wrapper">
    <img id="MyPic" src="http://www.davidstorey.tv/wp-content/uploads/2012/05/image.php_.jpeg" alt="" width="300" height="200" />
</div>

CSS

body{
    width:100%;
}

#Wrapper{
    width:98%;
    border:1px solid red;
}

的jQuery

$("document").ready(function(){
    var ratio=$("#MyPic").width() / $("#MyPic").height();
    $("#MyPic").css("width","100%");
    $("#MyPic").css("height", $("#MyPic").width()/ratio+"px");
});

以下是jsfiddle

的链接

在CSS中自动调整图像大小而不替换HTML宽度/高度属性？

2 个答案: