Как масштабировать содержимое div с помощью div?

Question

У меня есть родительский div, содержащий изображение с кучей «дыр» в нем. У меня есть дочерний div для каждого отверстия, который определяет точный размер этих отверстий. В отверстиях у меня есть текст, который я установил в положение: абсолютное, чтобы они точно входили в отверстия. Однако, когда я изменяю размер родительского div, содержимое не масштабируется вообще, и они остаются одинакового размера. Они также не находятся внутри отверстий.

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%; 
    } 

Вы можете использовать ВЭкран Hieght или ВЭкран Ширин блок для этого случая. Ниже приведен пример того, как вы могли бы использовать.

#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

Вы можете использовать свойство CSS, называемое transform, вместо прямого изменения размера.

Если вам необходимо установить размер изображения:

// 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) + ')';