Как исправить размер родительского элемента после масштабирования изображения?

Question

Доброе утро, Я пытаюсь уменьшить размер своих фотографий на веб-сайте, но они занимают то же место, что и исходное изображение.

div {position: absolute; background: green; width: auto; height: auto;}
img {-moz-transform:scale(0.5); -webkit-transform:scale(0.5); transform: scale(0.5); transform-origin: 0 0; }

<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Black_hole_-_Messier_87_%28cropped%29.jpg/1200px-Black_hole_-_Messier_87_%28cropped%29.jpg" alt="Black hole - Messier 87 (cropped).jpg">
</div>

Там вы можете увидеть это: https://jsfiddle.net/m6h42zba/

Спасибо за помощь.

Answer 1

CSS:

span {display: inline-block;}
img {width: 75%;}

HTML:

<span>
    <img src="example.png"/>
</span>

Простое решение