css - 高度和宽度的响应式图像

Question

以下链接对其宽度是响应式的，但我们还需要它在高度上也响应式，这样用户就不必在任何尺寸的屏幕上滚动图像。我试过 max-height:100% 和 max-width:100% 但没有运气。这是如何实现的？谢谢！

http://www.photoeye.com/gallery/nick-brandt-2013/enlargement.cfm?ip=1&i=24&id=185363&pid=Portfolio14#22

Answer 1

如果您知道 img 的比例，则只能将其固定在高度上。

然后你可以利用视口高度长度

img {
  max-width: $imgRatio * 80vh; /* max 80 % of viewport height for img */
}

浏览器无法在保持比率的同时限制两个轴的高度。

要在两个方向上修复它，您需要另一个容器，它根据视口高度获取最大宽度。

请注意vh 尚未在所有浏览器中工作，并且当工具栏不在视野中或显示键盘时，移动浏览器会更改 vh。

Answer 2

身高限制是一个持续存在的问题。仅靠 CSS 无法解决（根据我的经验）。因此，肖像（非风景）图像通常是图像画廊中的问题。我的做法：

1) 仅从老式宽度开始：

.fullsize img { max-width: 200px; }

2）至少“限制损害”以响应屏幕高度

@media screen and (min-height:400px) { .fullsize img { max-width: 400px; } }
@media screen and (min-height:800px) { .fullsize img { max-width: 800px; } }

3）准备另外两个类，通过javascript应用（格式测量后）

.fullsize.fullwidth img {
    width: 100%      !important;
    height: auto     !important;
    max-width: none  !important; /* yes, back to none */
    max-height: none !important;
}

.fullsize.fullheight img {
    width: auto      !important;
    height: 100%     !important;
    max-width: none  !important;
    max-height: 100% !important;
}
/* (!important needed for precedence over media queries) */

最后，javascript：

App.adjustFullsize = function( t ) {
    t.each( function(){
        var p=$(this).parent('.fullsize:first');

        var dispW= $(window).width(),
            dispH= $(window).height() - 126, /* fugde-factor deducts header, footers, etc. */
            dispRatio = (dispH>0) ? (dispW/dispH) : 1.0,

            // no need to get real width, as long as
            // ratio is correct $('<img/>').attr()
            imgW = $(this).width(),
            imgH = $(this).height(),
            imgRatio = (imgH>0) ? (imgW/imgH) : 1.0;


        if ( imgRatio > dispRatio ) // hits left-right of bbox
            p.removeClass('fullheight').addClass('fullwidth').css('height','');
        else  // hits top-bottom of bbox
            p.removeClass('fullwidth').addClass('fullheight').css('height',dispH);
    });
};

4）您应该慷慨地触发调整大小事件。基本上，因为它需要在图像（不仅仅是 DOM）加载后触发，但是并不是每个设备都能可靠地触发 .load() 事件，特别是在缓存的情况下。

/* depend on image load, NOT jQuery.ready(). Warning, not every device fires load() events, i.e. ipad */
$('.fullsize img').load( function() {
    App.adjustFullsize( $(this) );
});

/* trigger again on resizes (includes tablet turnaround etc) */
$(this).resize( function() {
    App.adjustFullsize( $('.fullsize img') );
});

$( function() {
    App.adjustFullsize( $('.fullsize img') );
});

因此：考虑通过 jQuery.delay() 进行另一个调用，延迟为 100 毫秒。（不会闪烁/跳跃，如果一切都很好，如果没有，会有所帮助。）