这个问题给我带来了一场噩梦,并且拖延了一个元素。我有一个 480px x 280px
的 div,其中包含绝对定位的元素。文本,不同大小的图像。我想缩小 div 以适应移动设备,可能 300px x 180px
。我尝试过 css 媒体查询,但字体大小、元素位置和图像尺寸保持不变,只有 Canvas 改变了大小。
我的代码:
$(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>
请检查 fiddle -> http://jsfiddle.net/gscq1jqw/1/
我需要帮助,通过缩小而不丢失任何像素,将大 div 添加到小 div。请询问任何澄清。我的网站是http://thecardguys.co.ke/我正在构建一个移动版本
最佳答案
更新:
经过反复试验,我们将 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%;
}
为你制作了一个 fiddle 。没有花太多时间使 fiddle 变得完美,但它应该给你一个大概的想法。假设我理解你想正确地做的是 https://jsfiddle.net/gscq1jqw/2/ (此外,我可能会或可能不会无缘无故地在 div 上添加填充。您可以将其视为 easteregg)
关于javascript - 将大 div 适合小 div 并保持比率 : absolute elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32393656/