博客

最近公司安排微信展示公司宣传网页，html格式。由于微信是竖屏展示，打开链接后多数情况不能横屏。

一 需求

html中图片旋转90度；

图片自适应，填充整个屏幕。

二 解决方案

1、css代码旋转

#imgId{
	transform: rotate(90deg) !important;  /* !important 提升优先级*/
    position:absolute;
	}

2、js  获取网页可见区域长、宽，设置图片长、宽

function load(){
		var width=document.documentElement.clientWidth;
		var height=document.documentElement.clientHeight;
		
		var bodyDoc=document.getElementById('bodyId');
		bodyDoc.style.width=width+'px';
		bodyDoc.style.height=height+'px';
		
		var ga=document.getElementById('imgId');
		ga.style.width=height+'px';
		ga.style.height=width+'px';
		ga.style.top=(height-width)/2+"px";    //设置偏移
		ga.style.left=-(height-width)/2+"px";
	}

window.onload = load;

效果

3、对于某些情况下，图片不断刷新，导致js设置长宽不起作用，可使用css设置图片长宽

#imgId{
        transform: rotate(90deg) !important;
        position:absolute;
        width:calc(100vh) ;
        height:calc(100vw) ;

      }

calc介绍：

vw  相对于视口的宽度。视口被均分为100单位的vw

vh  相对于视口的高度。视口被均分为100单位的vh

vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax

vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

三 说明

用简单的方法解决一类问题。有不同见解，可议！