Question

我是CSS和HTML的新手，我正在尝试创建一个CSS版本：

http://i.stack.imgur.com/JNgUb.jpg

我已经成功创建了4种不同颜色的div，但这是我的结果：

http://i.imgur.com/ihYblSv.png

如何缩放div以适合整个页面？

我的代码是：

    body{
    background-color: #eae1c8;
    }
    #bg {
    transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    -o-transfrom:rotate(30deg);
}

#blue {
    height: 25%;
    background-color: #9dd2b5;
}
#green {
    height: 25%;
    background-color: #6aa427;
}
#yellow {
    height: 25%;
    background-color: #f0b747;
}
#orange {
    height: 25%;
    background-color: #de5b1e;
}

Answer 1

在旋转之前它适合整个页面。

如果您希望它占据整个页面，请设置页面正文{overflow：hidden;然后玩你的div的大小来填补空间。设置#bg {height：160％;并且每种颜色达到40％，看看它是如何工作的。

Answer 2

这是我用一点CSS创建的Javascript函数。这非常适合在不改变比率的情况下自动调整页面大小。这将在启动时以及调整窗口大小时调整页面大小。您可以将body更改为您想要整页的元素，如果您希望仅在单击时调整大小，则可以将该函数更改为使用click事件。只需删除该函数的调用并将$（window）.resize更改为$（'＃elementid'）。单击

CSS：

body{
   height:620px;
   width:1023px;
   position:absolute;
   box-sizing:border-box;
   transform-origin: 0 0;
   -moz-transform-origin:0 0;
   -o-transform-origin: 0 0;
   -webkit-transform-origin: 0 0;
}

JavaScript的：

var ratio;
var left;
resize();

$(window).resize(function () {resize();});

function resize()
{
    ratio = window.innerHeight / $('body').innerHeight();
    if (window.innerWidth / $('body').innerWidth() < ratio) {
        ratio = window.innerWidth / $('body').innerWidth();
    }
    ratio -= .04;
    $('body').css('-ms-zoom', ratio);
    $('body').css('-moz-transform', 'scale(' + ratio + ')');
    $('body').css('-o-transform', 'scale(' + ratio + ')');
    $('body').css('-webkit-transform', 'scale(' + ratio + ')');
    $('body').css('transform', 'scale(' + ratio + ')');
    left = ($(window).innerWidth() - $('body').outerWidth() * ratio) / 2;
    $('body').css('left', left);
}

缩放div以适合页面

2 个答案: