将大 div 适合小 div 并保持比例：绝对元素

Question

这个问题让我做噩梦，并且正在拖延一个项目。我有一个带有绝对定位元素的480px by 280px div。文本，不同大小的图像。我想缩小 div 以适应移动设备可能300px by 180px。我尝试过 css 媒体查询，但字体大小、元素位置和图像尺寸保持不变，只有画布改变大小。

我的代码：

$(document).ready(function()
{
 $('#btn').click(function()
     {
             var div=$('#bigcard').html();
             $('#smallcard').html(div);
              }
              );

  }); 
} 

#bigcard
{
width:500px;
height:300px;
border-width:2px;
border-color:black;
border:1px solid black;
background:orange;

}
#smallcard
{
 width:200px;
 height:130px;
 background:pink;
 border:1px solid black;
}

 Big Div
<div id="bigcard">
<span style="position:absolute;font-size:15px;color:green;font-family:fantacy:margin-top:20px;margin-left:40px;">Some user generated text</span> 
<span style="font-size:35px;color:black;font-family:tahoma;margin-top:200px;margin-left:90px;font-weight:bold;position:absolute;">Foo Foo</span> 
 <img src="http://www.clker.com/cliparts/Y/f/v/m/p/3/flying-bird-md.png" id="image1" style="margin-top:50px;margin-left:100px;width:80px;"/>
 <img src="http://www.clker.com/cliparts/Y/f/v/m/p/3/flying-bird-md.png" id="image1" style="margin-top:100px;margin-left:130px;width:50px;"/>
 </div>


Small div
<div id="smallcard">  </div>
<a href="#" id="btn">Click here</a>

请检查小提琴-> http://jsfiddle.net/gscq1jqw/1/

我想通过缩小而不丢失任何像素来帮助将大 div 添加到小 div。请要求任何澄清。我的网站是http://thecardguys.co.ke/，我正在构建一个移动版本

Answer 1

更新：

经过反复试验，我们找到了 CSS 转换作为解决方案

$('#bigcard').css({'transform': 'scale(0.5)'});

当然，最好将它放在一个接受元素和比率的函数中，而不是硬编码。

原文：

嗯...将一个 div 放入另一个 div 并不完全模拟屏幕大小的变化。你将鸟的位置设置在“Margin-top:200px”上，这意味着它总是位于距离顶部 200px 的位置。您的所有元素都基于侧面的 pxls 进行定位，无论屏幕大小或它们所属的任何 div 元素如何。

考虑使用百分比来代替定位。例如，将小鸟设置为 10% 的宽度和高度，并从左侧定位 10%。这可以适当地扩展。

.bigBird{
    width:10%;
    position:absolute; 
    top:50%;
    left:20%;
}

为你做了一把小提琴。没有花太多时间使小提琴完美，但它应该给你一个大致的想法。假设我理解你想要做的正确的是 https://jsfiddle.net/gscq1jqw/2/ （此外，我可能会或可能不会无缘无故地在 div 上添加填充。您可以将其视为复活节彩蛋）

Answer 2

$('#bigcard').css({'transform': 'scale(0.5)'});

JonasR 给出的解决方案适用于我的情况