divとdivの内容をどのようにスケールするのですか？

Question

親のdivには、画像に「穴」が含まれています。私はそれらの穴の正確なサイズを定義する各穴の子divを持っています。穴には、私が配置するように設定したテキストがあります。絶対に穴に収まるようにしてください。ただし、親divのサイズを変更すると、コンテンツのサイズがまったく変わらず、同じサイズになります。彼らはもはや穴の中にいません。あなたはその場合のビューポートHieghtまたはビューポートの幅ユニットを使用することができ

Answer 1

ユーザ「％」単位として代わりに画素

<div id="ParentDiv"> 
    <img src="../610614-spring-forest.jpg"> 
    <div class="hole1">Tree1</div> 
</div> 

#ParentDiv{ 
     max-width:900px; 
     position: relative; 
    } 
    img{ 
     width: 100%; 
     height: auto; 
    } 
    .hole1{ 
     position: absolute; 
     left:2.75%; 
     top:23.87%; 
    } 

。以下は使用方法の例です。

#ParentDiv{ 
     max-width:100vw; 
     max-height:100vh; 
     position: relative; 
    } 
    img{ 
     width: 100%; 
     height: auto; 
    } 
    .hole1{ 
     position: absolute; 
     /*left:2.75%; 
     top:23.87%;*/ 
     left:2.75vw; 
     top:23.87vh; 
    } 

同様に使用すると、希望の結果が得られます。

Answer 2

サイズを直接変更する代わりに、transformというCSSプロパティを使用できます。あなたは、画像のサイズを設定する必要がある場合

：あなたは重大なパフォーマンス掘り崩した機能を持っていないと仮定すると、

// this is the container the image and its text is in 
imageContainer = document.getElementById('myDiv'); 
// original size of image 
origX = 400; 
origY = 300; 
// size you need it to change to 
newX = 800; 
newY = 600; 
/* 
Tells CSS to stretch from the top-left edge of the object, so it won't stretch off the left side of the screen 
Best way to change value would be percentages 
Value of '0 0' sets origin to top-left 
Value of '100% 100%' sets origin to bottom-right 
*/ 
imageContainer.style.transformOrigin = '0 0'; 
//the following is just one string, broken into multiple lines for easy explanation 
// tells CSS that the transform type is scale 
imageContainer.style.transform = 'scale(' + 
    // tells CSS how many times normal size to widen image. in this case evaluates to 2, since 800/400 is 2, making image 2x wider 
    (newX/origX) + ',' + 
    // tells CSS how many times normal size to heighten image. in this case evaluates to 2, since 600/300 is 2, making image 2x taller 
    (newY/origY) + ')'; 

を、これは偉大な動作します。あなたが何かのことが起こっているなら、少し遅いです。

アンコメント：

imageContainer = document.getElementById('myDiv'); 
origX = 400; 
origY = 300; 
newX = 800; 
newY = 600; 
imageContainer.style.transformOrigin = '0 0'; 
imageContainer.style.transform = 'scale(' + (newX/origX) + ',' (newY/origY) + ')';