Scale image bug - html

Question

My html:
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/ef/1e/45/ef1e450945a5a7ff0c4b7776810d4f90.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/0e/3b/85/0e3b858ffcfdbfa02b562c3dc7e3b5e1.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/df/c7/88/dfc7889e5dd99ad0c45834b4e4675389.jpg" alt="my img" />
</div>
My css:
.wrapper {
margin: 0;
padding: 0;
}
.scale-img {
transform: scale(0.5);
transform-origin: top left;
}
In my page I have several imgs, and each of the img's size is different, I don't want to set size in css for each img, and I just want to scale each img to half of its original size. But the wrapper div stay the img its original size, I don't know where go wrong?

Answer 1

Try this... For better understanding, I have used a dummy image.
.wrapper {
margin: 0;
padding: 0;
border: 1px solid #000;
position:absolute;
}
.scale-img{
width:100px;
height:100px;
position: relative;
}
<div class="wrapper">
<img class="scale-img" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="my img" />
</div>

Answer 2

The reason transform doesn't affect the parent is because it "modifies the coordinate space of the CSS visual formatting model".
So in effect, it's sort of like doing this:
#container {
height:200px;
width:200px;
border:1px solid;
position:relative;
}
#container span {
background:red;
position:absolute;
top:50px;
left:50px;
right:50px;
bottom:50px;
}
<div id="container">
<span></span>
</div>
In an attempt to fix your issue, you'll more than likely need a bit of JavaScript:
var objScaleIMGs = document.querySelectorAll('img.scale-img') // Grab all the images that need scaling.
for (var i = 0; i < objScaleIMGs.length; i++) { // Loop through all the images, setting their dimensions half of what they currently are.
var h = objScaleIMGs[i].height;
var w = objScaleIMGs[i].width;
objScaleIMGs[i].height = h / 2;
objScaleIMGs[i].width = w / 2;
}
.wrapper {
margin: 0;
padding: 0;
border: 1px solid;
float: left;
}
.scale-img {
float: left;
}
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/ef/1e/45/ef1e450945a5a7ff0c4b7776810d4f90.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/0e/3b/85/0e3b858ffcfdbfa02b562c3dc7e3b5e1.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/df/c7/88/dfc7889e5dd99ad0c45834b4e4675389.jpg" alt="my img" />
</div>

Answer 3

You should transform the wrapper instead if you want to change the div's size with the change in img original size. The reason being that scale is used for img and not for wrapper div.
.wrapper {
margin: 0;
padding: 0;
height: 960px;
width: 540px;
}
.scale-img {
height:100%;
width:100%
}
You should refer: CSS Transform with element resizing
The problem I noticed is that when element scales, browser change its pixels ratio, not pixels amount. Element is smaller but it doesn't change its actual pixel size in DOM. Because of that I don't think that CSS-only solution exist.