画像を作成し、ウィンドウのサイズに基づいてテキストのサイズを変更します

Question

私はゲームの一族がGrand Theft Auto 5をオンラインでプレイしている友達のためのシステムを設計しています。しかし、私は問題に遭遇しています。 「ドライバライセンス」システムを作成しようとすると、ウィンドウのサイズを変更しようとしているときに、プレースメントのいずれもdiv内または正しい領域に残っていません。本質的に、それらは親DIVに比例しません。

私はこれに精通していないし、Googleは本当に多くのことをしてくれていません。なぜなら、これはかなり具体的な要求のようです。私はこの仕事を、私が助けを求める前に認めようとするよりずっと長い間試みようとしました。

これはHTMLです：

<div class="license_preview"> 
    <div class="licensenumber"><strong class="title">License Number</strong> <span>123-45-6789</span></div> 
    <div class="photo"><span><img src="https://cad.warptimegaming.com/assets/img/misty.png"></span></div> 
    <div class="dob"><strong class="title">DOB: </strong><span>01/16/1985</span></div> 
    <div class="expiry"><strong class="title">Expires: </strong><span>01/16/2019</span></div> 
    <div class="righthand"> 
    <div class="name"><strong class="title">Name: </strong><br><span>Marishiah Q. Vezorile</span></div> 
    <div class="address"><strong class="title">Address: </strong><br><span>123 Fake Street,<br>Vinewood, LS </span></div> 
    <div class="details"> 
    <strong class="title">Eyes: </strong> <span>Brown</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <strong class="title">Height: </strong> <span>6'3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <strong class="title">Sex: </strong> <span>M</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <strong class="title">Class: </strong> <span>D</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <strong class="title">Donor: </strong> <span>N</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <strong class="title">CLR: </strong> <span>N</span> 
    </div> 
    </div> 
    <div class="signature" style="padding-top:-10px;"> 
    <span class="title">Signature:</span><br> 
     Marishiah Q. Vezorile 
    </div> 
    </div> 
</div> 

これはCSSである：ここでは

.title { 
    font-size: 10pt; 
    font-family: 'Orbitron', sans-serif; 
} 
.license_preview { 
    background: url('https://cad.warptimegaming.com/assets/img/svg/licensebg.svg'); 
    background-size: contain; 
    height: 450px; 
    width: 100%; 
    background-repeat: no-repeat; 
    font-family: 'Orbitron', sans-serif; 
    display: inline-block; 
    position: relative; 
} 
.license_preview .licensenumber { 
    padding-top: 45px; 
    padding-left: 25px; 
    font-family: 'Orbitron', sans-serif; 
    float:left; 
    display: inline-block; 
    position: absolute; 
    width: 600px; 
} 
.license_preview .photo { 
    padding-top: 80px; 
    padding-left: 30px; 
    font-family: 'Orbitron', sans-serif; 
    clear:all; 
    float:left; 
    display: inline-block; 
    position: absolute; 
} 
.license_preview .dob { 
    padding-top: 345px; 
    padding-left: 30px; 
    font-family: 'Orbitron', sans-serif; 
    clear:both; 
    float:left; 
    display: inline-block; 
    position: absolute; 
    width: 600px; 
} 
.license_preview .expiry { 
    padding-top: 375px; 
    padding-left: 30px; 
    font-family: 'Orbitron', sans-serif; 
    clear:both; 
    float:left; 
    display: inline-block; 
    position: absolute; 
    width: 600px; 
} 
.license_preview .righthand { 
    background-repeat: no-repeat; 
    font-family: 'Orbitron', sans-serif; 
    display: inline-block; 
    padding-top: 100px; 
    padding-left: 200px; 
    font-size: 15pt; 
    position: absolute; 
    width: 800px; 
} 
.license_preview .righthand .name { 
    padding-top: 10px; 
    padding-left: 30px; 
    font-family: 'Orbitron', sans-serif; 
    clear:both; 
    width: 300px; 
    float:left; 
    display: inline-block; 
    position: absolute; 
} 
.license_preview .righthand .address { 
    padding-top: 60px; 
    padding-left: 30px; 
    font-family: 'Orbitron', sans-serif; 
    clear:both; 
    float:left; 
    display: inline-block; 
    position: absolute; 
    width: 500px; 
} 
.license_preview .righthand .details { 
    padding-top: 190px; 
    padding-left: 30px; 
    font-family: 'Orbitron', sans-serif; 
    clear:both; 
    float:left; 
    font-size: 10pt; 
    display: inline-block; 
    position: absolute; 
    width: 600px; 
} 
.license_preview .righthand .details span { 
    padding-right: 8px; 
    clear: both; 
    float:right 
    width: 600px; 
} 
.license_preview .righthand .details strong { 
    padding-right: 8px; 
    clear: both; 
    float:right 
    width: 600px; 
} 
.license_preview span, .license_preview .righthand span { 
    font-family: 'Open Sans', sans-serif; 
    position: absolute; 
} 
.signature { 

    font-family: 'Homemade Apple', cursive; 
    font-size: 16pt; 
    padding-top: 335px; 
    float:right; 
    padding-left: 240px; 
    position: absolute; 
    z-index: 99; 
} 

は、このプロジェクトのためにjsFiddleへのリンクです： www.jsfiddle.net/bradjtrammell/jg7favfr/

すべてのヘルプは大歓迎です。あなたはしかし、小さな画面でテキストサイズをリサイズCSSのズーム倍率を使用することができ

乾杯

Answer 1

ではなく、応答性の設計よりも標準ではありません。

サンプルjqueryのCSSズーム：

$(document).ready(function(){ 
    $("body").css({"zoom":$(window).width()/1000}); 
}) 

Answer 2

ステップ1.基本

スケールこのように、CSS3を使用して、ライセンス：

.license_preview { 
    transform: scale(.5); 
    -webkit-transform: scale(.5); 
    -moz-transform: scale(.5); 
    -ms-transform: scale(.5); 
    -o-transform: scale(.5); 
} 

参照してください：http://jsfiddle.net/r0ct28a7/

ステップ2.いくつかの改善

これを追加することで、左上隅に変換し、原点を設定するのが賢明かもしれ：

.license_preview { 
    ... 
    -ms-transform-origin: 0% 0%; /* IE 9 */ 
    -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */ 
    transform-origin: 0% 0%; 
} 

またの幅と高さを定義するのが賢明かもしれこのようなライセンスプレビューDIV、：

.license_preview { 
    ... 
    width: 730px; /* this was 100% */ 
    height: 450px; 
} 

ステップ3.最後の仕上げ

あなたはjQueを聞かせすることができますRYスケールファクタのための計算を行うので、それはこのように、サイズ変更で更新されます：https://codepen.io/anon/pen/jGvKLg

PS：

ここ

$(window).resize(function(){ 
    var scalefactor = ($(window).width()/780); 
    if(scalefactor>1) scalefactor=1; 
    $(".license_preview").css('transform','scale('+scalefactor+')'); 
    $(".license_preview").css('-webkit-transform','scale('+scalefactor+')'); 
    $(".license_preview").css('-moz-transform','scale('+scalefactor+')'); 
    $(".license_preview").css('-ms-transform','scale('+scalefactor+')'); 
    $(".license_preview").css('-o-transform','scale('+scalefactor+')'); 
}) 

は（完全に反応）実施例です。 780の値は、要素のネイティブな幅にページのいくつかのパディングを加えたものになります。あなたは、それはここでは、ブラウザのデフォルトのフォントサイズ

を使用するように画面のサイズに比例要素をリサイズなるあなたのサイジングのための代わりにPXのEMまたはREMを使用して試みることができる

Answer 3

は、いくつかのメモは、EMを使用して、次のとおりです。 https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

値のための

としては、画面サイズが変化してもサイズ変更時のdivで物事を保つのを助けるべきでEMを使って試行錯誤のビットを取るかもしれませんが、使用するようにフィドルのリンクはなしで保存されません