javascript - 图片如何按比例填充窗口？

问题描述

问 题

比如一张宽x高=900x600的图片，窗口宽x高=720x1920，我想让图片按比例填充窗口高度（不用管图片宽度会超出窗口）。

再比如图片宽x高=500x1200，窗口宽x高=1440x1080，这时应按比例填充窗口宽度。

如图：

请问如何实现？

感谢各位大神！现将解决方法整理如下：

法一：（直接用background）

<style type="text/css">
body{
background-image: url(a.jpg);
background-size:auto 100%;
background-position:center 0;
background-repeat:no-repeat;
}
</style>

法二：（用img + transform，推荐）

<style type="text/css">
img{
width: auto;
height: 100%;
margin: 0 auto;
position: relative;
left: 50%;
transform: translate(-50%, 0);
border: none;
top: 0;
}
</style>
<img src="a.jpg"/>

法三：（用img + onload，不推荐，每次需要刷新才能居中）

<style type="text/css">
img{
width: auto;
height: 100%;
margin: 0 auto;
position: relative;
left: 50%;
border: none;
top: 0;
}
</style>
<img src="a.jpg" onload="this.style.marginLeft = (this.width) /-2 + 'px'" />

解决方案

这是两种情况。

第一种，你的左图，图片高度需要填满整个容器，宽度超出的可以忽略，并且图片水平居中。

    background-size:auto 100%;/*水平方向自适应，垂直方向100%填满*/
    background-size:cover/*等同于上面的写法*/
    
    background-position:center 0;/*水平居中，高度已经填满了不用控制位置了*/

第二种，你的右图，图片宽度填满整个容器，高度超出的忽略，并且图片垂直要居中

    background-size:100% auto;/*水平方向100%填满，垂直方向自适应*/
    background-size:contain/*等同于上面的写法*/
    
    background-position:0 center;/*水平已填满不用控制，垂直方向居中显示*/

如果不用background图片，用img也是一样，水平和垂直方向其中之一100%，另一个自适应，居中就用position控制居中或者用javascript实现。

这篇关于javascript - 图片如何按比例填充窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！