CSS трансформация: масштабирование работает не так, как хотелось

Question

Я хочу, чтобы текст прямо под изображением масштабировался с помощью transform: scale (0.50, 0.50);

Проблема заключается в том, что высота и ширина ограничительной рамки изображения не масштабируются вместе с изображением.Был еще один пост, из которого я получил это изображение пример масштабированного изображения , но это не тот ответ, который я ищу.Как я могу сделать так, чтобы границы большего, предварительно масштабированного изображения соответствовали меньшему, новому масштабу изображения?Мой код выглядит следующим образом:

.content #imagediv {  
    background-color: blue;  
}  
.content #imagediv img {  
    transform: scale(0.50, 0.50);  
    transform-origin: top left;  
    display: inline-block;  
}

Это выглядит как это

Answer 1

Я думаю, вам придется изменить размер изображения, используя другой метод.Я не думаю, что transfrom: scale будет работать в этом случае.Почему бы просто не установить ширину изображения и позволить высоте быть динамической ??Текст будет сидеть прямо под изображением в этой точке.Вы также можете использовать js, чтобы изменить ширину изображения до 50% от его оригинала, если вам нужно, чтобы оно было 50%.

var img = document.getElementById('image'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
img.style.width = (width / 2) + 'px';

.content #imagediv {  
    background-color: blue;
    line-height:0; //used to get rid of extra space after the image.
}  
.content #imagediv img {  
    width:400px; //changes to 200px with js. Even if this is not set it will still get set to 200px because the js is calulating based off the image size.
}

<div class="content">
    <div id="imagediv">
        <img id="image" src="https://via.placeholder.com/400x400" />
    </div>
    <span>Random Text I want right below the image</span>
</div>