0

我正在尝试使图像在不破坏布局的情况下很好地适应不同的屏幕尺寸。下面的 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 解决方案会非常好。

4

2 回答 2

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;
}

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

于 2012-07-18T19:29:49.420 回答
0

如果我理解正确，您可以使用以下代码实现您的目标

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的链接

于 2012-07-16T19:11:29.720 回答