Scale image bug

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?

Refer [this](http://stackoverflow.com/questions/10858523/css-transform-with-element-resizing/10913299#10913299). — Manu, Jul 23 '15 at 10:14
I have amended my answer to include something that may help fix your problem. — Jamie Barker, Jul 23 '15 at 12:41

score 1 · Answer 1 · answered Jul 23 '15 at 08:05

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>

answered Jul 23 '15 at 08:05

Sargam Gupta

83
9

It not fit my situation – wupeng Jul 23 '15 at 08:18
Do you want the the div to have fixed size? and the image to be of the half of the size? – Sargam Gupta Jul 23 '15 at 08:59
No, 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 and the wrapper div's size is equal to the img size(half of original size) – wupeng Jul 23 '15 at 09:11

Jamie Barker · Answer 2 · 2015-07-23T12:28:05.450

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>

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

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.

edited May 23 '17 at 12:06

Community

1
1

answered Jul 23 '15 at 07:50

Manu

2,251
19
30

@wupeng what is the issue now? – Manu Jul 23 '15 at 07:56
I did as you answer, and div is scaled, but the div's size was still the img original size – wupeng Jul 23 '15 at 08:03
@wupeng can u edit the question to include what actually is happening and what u expect? like screenshots – Manu Jul 23 '15 at 08:05
@wupeng In that case you should set the height and width of the wrapper instead of transforming the img. See the edit. – Manu Jul 23 '15 at 08:26
In my page, I have several imgs and each of the img size is different, I dont want to set many size in css and scale my img to half of its original size just meet my needs, so I scaled my img in css and then I encounter my bug – wupeng Jul 23 '15 at 08:30
@wupeng So you have many img, and how do u see those fit in wrapper? May you explain the expected thing instead of giving little hints. – Manu Jul 23 '15 at 08:34

Scale image bug

3 Answers3