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 doesn't work in all browsers yet，当工具栏不在视图范围内或显示键盘时，移动浏览器会更改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）你应该慷慨解雇resize事件。基本上，因为它需要在 images （不仅仅是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（）进行另一次调用，延迟时间为100ms。（如果一切都很好的话，不会闪现/跳，如果没有，也会有所帮助。）

响应式图像的高度和宽度

2 个答案: