Question

在CSS中覆盖带有图像的页面似乎很麻烦。我的先例是：

1）图像始终完全可见 2）尽可能覆盖 3）保持纵横比 4）桌面 - 移动响应

任何可行的解决方案？我尝试了臭名昭着的flex-box，基本的css，jquery和background-size：contains，但我似乎错过了什么。

我的目标是用整个页面填充图像，保持纵横比始终正确，并尽可能多地从屏幕空间填充（在移动设备上旋转正常）。

  .className {
      max-width: 100%;
      max-height: 100%;
      bottom: 0;
      left: 0;
      margin: auto;
      overflow: auto;
      position: fixed;
      right: 0;
      top: 0;
  }

编辑：http://jsfiddle.net/xem36f7h/4/表现正常，除了一些奇怪的滚动与iphone 5S

Answer 1

我写了这个。它似乎适用于我测试过的每台设备。只需更改YOURIMAGESOURCE，YOURIMAGEX，YOURIMAGEY。

HTML

<div id="resizediv">
    <img src="YOURIMAGESOURCE">
</div>

CSS

#resizediv  {
    margin: auto;
    left: 0;
    right:0;
    }

#resizediv  img {
    width: 100%;
    height: 100%;
}

JQUERY

<script>
function resizebyratio(x, y) {
    var screenw = window.innerWidth;
    var screenh = window.innerHeight;
    var screenratio = screenw / screenh;

    var divratio = x / y;

    if (divratio <= 1) {
        var divwidth = screenh * x / y;
        $("#resizediv").css({"height":screenh+"px", "width":divwidth+"px"});
    }
    else if (1 < divratio && divratio <= screenratio) {
        var divwidth = screenh * x / y;
        $("#resizediv").css({"height":screenh+"px", "width":divwidth+"px"});
    }   
    else { 
        var divheight = screenw * y / x;
        var mtop = (screenh - divheight) / 2;
        $("#resizediv").css({"width":screenw+"px", "height":divheight+"px", "margin-top":mtop+"px"});
    };

};

$(document).ready(resizebyratio(YOURIMAGEX, YOURIMAGEY));
</script>

Answer 2

您是否尝试过background-size: cover？

http://jsbin.com/limobop/1/edit?css,output

Answer 3

我不确定页面上有多少图像，但这会找到所有图像并按高度调整大小。

更新：现在，这样可以保持宽高比并最大限度地扩大尺寸，而无需离开页面。

JS：

function resize() {
    var img = document.getElementsByTagName('img'); 

    var w = window.innerWidth;
    var h = window.innerHeight;
    console.log(w);
    console.log(h);

    for (i = 0; i < img.length; i++) { 
        var ratio = (img[i].clientHeight / img[i].clientWidth);
        if (img[i].clientHeight > h && img[i].clientWidth < w) {
            img[i].style.height = h + "px";
            img[i].style.width = (h / ratio) + "px";
        }
        if (img[i].clientHeight <= h && img[i].clientWidth < w && ratio > 1) {
            img[i].style.height = h + "px";
            img[i].style.width = (h / ratio) + "px";
        }
        if (img[i].clientWidth >= w) {
            img[i].style.width = w + "px";
        }
        if (img[i].clientHeight < h && img[i].clientWidth <= w  && ratio < 1) {
            img[i].style.width = w + "px";
        }
    }
}

resize();
window.onresize = resize;

CSS：

img {
    max-width:100%;
    max-height:100%;
    display: block;
    margin: 5px auto
}

http://jsfiddle.net/hopkins_matt/k7t26sw5/

覆盖整页中心图像，同时保持纵横比并显示完整图像

3 个答案: