在保持宽高比的同时缩放div以填充屏幕 [英] Scale div to fill screen while maintaining aspect ratio

问题描述

这是我正在谈论的页面的JSFiddle: http://jsfiddle.net/nmUuU/

我需要外部div(带有class="page")来扩大或缩小以填充用户的屏幕.我希望div(以及显然是其子级)的长宽比保持不变.我曾尝试使用 TextFill 之类的jQuery插件进行plaing，但没有成功.

我已经用图像完成了上千次，但是这次我有一个div，里面有很多元素.还能做到吗?

编辑:似乎我可能没有强调这一点，但我希望div的子级也要增加.看起来div是刚刚放大的图像；内部元素应保持彼此之间的关系，同时扩展以填充父元素.它应该从看起来像此到看起来像解决方案

我不认为目前仅可以使用CSS完成此操作，因为您将需要能够读取某些元素的宽度，因此无法完成此操作在这一刻.但是由于JS现在可以接受，您可以使用 jQuery :

function zoomit() {
  $("#page1").css('zoom', $(window).width() / $("#page1").width());
}

$(document).ready(zoomit);

$(window).resize(zoomit);

这是 jsFiddle

这是的 jsFiddle 最新版本，该版本不使用zoom，而仅使用-transform供应商标签.

我刚刚意识到zoom实际上在Firefox上不起作用.相反，您可以将-moz-transform: scale(x, y);用于Firefox，并将x和y设置为适当的值，您可以采用与上面示例中相同的方法进行计算.

Edit2

这是指向w3schools的链接，其中包含有关CSS 2D转换和CSS前缀的信息正如您在评论中提到的那样，其他浏览器写一些检查width > height是否相反的方法，然后在此基础上进行转换，应该适用于所有浏览器.如果您可以正常运行，请发布jsFiddle，然后将其添加到答案中，如果您无法正常运行，我很乐意尝试一下.

Here's a JSFiddle of the page I'm talking about: http://jsfiddle.net/nmUuU/

I need the outer div (with class="page") to expand or shrink to fill the user's screen. I want the aspect ratio of the div (and obviously, its children) to stay the same. I've tried plaing with jQuery plugins like TextFill, but had no success.

I've done this a thousand times with an image, but this time I have a div with a bunch of elements inside. Can it still be done?

EDIT: It seems like I may not have emphasized this, but I want the children of the div to increase in size as well. It should look as if the div is an image that has just been scaled up; the elements inside should maintain their relationship to one another, while expanding to fill the parent. It should go from looking like this to looking like this (border added to indicate screen edges).

While pure CSS would always be nice, I'm guessing it's going to involve some Javascript. Even just a couple pointers would be much appreciated.

解决方案

I don't think this can be done with CSS only currently, as you would need to be able to read the width of certain elements, this cannot be done at the moment. But since JS is OK with you now, you could do something like this using jQuery:

function zoomit() {
  $("#page1").css('zoom', $(window).width() / $("#page1").width());
}

$(document).ready(zoomit);

$(window).resize(zoomit);

Here's a jsFiddle

Here's a jsFiddle of the latest version which doesn't use zoom but -transform vendor tags only.

Edit:

I just realised that zoom doesn't actually work on Firefox. Instead you could use -moz-transform: scale(x, y); for Firefox and set x and y to the appropriate values, which you can work out in the same way as I have already done in the example above.

Edit2

Here's a link to w3schools with some info about CSS 2D transforms and the prefixes for other browsers, as you mentioned in the comments, writing something that checks if for width > height and the other way around, and then basing the transform on that, should do the trick for all browsers. Post the jsFiddle if you get it working and I'll add it to the answer, I'm happy to have a go at it if you don't get it working.

这篇关于在保持宽高比的同时缩放div以填充屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！