適合大div到小div並保持比例：絕對元素

這個問題給了我一個噩夢，並拖延了一個項目。我有一個div是480px by 280px絕對定位的元素。文字，不同大小的圖像。我想縮小div以適合移動設備300px by 180px。我試過CSS媒體查詢，但字體大小，元素位置和圖像尺寸保持不變，只有畫布更改大小。適合大div到小div並保持比例：絕對元素

我的代碼：

$(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/

我需要幫助的scalling下來，而不會丟失任何像素添加大格與小格。請詢問任何澄清。我的網站是http://thecardguys.co.ke/和我建立一個移動版本

來源

2015-09-04 jonah

與php無關 – Epodax

當然。我很絕望。 – jonah

它是因爲我試圖循環創建div的html數據，並將每個元素的大小更改爲較低的值。傾倒移動。你有一個想法@Epodax – jonah

更新時間：

位的試驗和錯誤登陸我們的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沒有明顯的原因，你可以認爲這是一種easteregg）

來源

2015-09-04 09:48:32 JonasR

嗨@Jonas，謝謝你的建議，我完全明白了。小提琴正在解決我的第一個問題。但我的應用程序使用絕對定位來對齊元素。這些元素是動態添加的，所以你真的可以特別對齊它們，請訪問這裏>> http://thecardguys.co.ke/customize_design.php?card=beautiful_business_cards_for_pet_stores,_farms_and&cid=115&step=2，看看我的觀點。 – jonah

因此增加新的元素時，我使用jQuery的可拖動和resizable其置於絕對位置的元素。我希望能夠縮小生成的html卡以適應更小的編輯器。希望你明白我的觀點。並希望你對我有更多的想法 – jonah

那麼，你可以嘗試迭代子元素，並根據大小的變化調整它們的位置/寬度？你究竟希望它如何工作;在調整屏幕大小時完全響應，或者僅在基於窗口啓動時進行調整？ – JonasR

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

解決方案通過JonasR給什麼適用於我的情況

來源

2015-09-05 05:25:50 jonah

適合大div到小div並保持比例：絕對元素

回答

相關問題