高度和宽度的响应式图像答案

【问题标题】：Responsive Image in both height and width高度和宽度的响应式图像
【发布时间】：2013-09-06 00:12:45
【问题描述】：

以下链接的宽度是响应式的，但我们需要它的高度也响应式，这样用户就不必在任何尺寸的屏幕上滚动图像。我试过 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

【问题讨论】：

如果您不想失真，那么我认为最好只响应宽度或高度。然后设置中心并隐藏溢出。
可能你还必须为包含的元素设置 max-height: 100% 吗？

标签： css

【解决方案1】：

如果你知道img的比例，你只能在高度上固定它。

那么你就可以使用viewport height length

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

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

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

请注意vh doesn't work in all browsers yet，当工具栏不在视线范围内或显示键盘时，移动浏览器会更改 vh。

【讨论】：

【解决方案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() 进行另一个调用，延迟为 100 毫秒。（不会闪烁/跳跃，如果一切都很好，如果没有，会有所帮助。）

【讨论】：