3

I have the page below and I expect to have the exact same result for both containers but it seems than #container1 is not resized after the scale in CSS. Is there a way to resize it, preferably in CSS only?

body {
  background: #ccc;
  padding: 20px;
}

#scaleable1 {
  transform-origin: left top;
  background: white;
  transform: scale(0.5);
  height: 100px;
  width: 400px;
  font-size: 14px;
}

#container1 {
  background: #666;
}

#scaleable2 {
  background: white;
  height: 50px;
  width: 200px;
  font-size: 7px;
}

#container2 {
  position: relative;
  background: #666;
}
<div id="container1">
  <div id="scaleable1">
    <h1>Something</h1>
  </div>
</div>

<div id="container2">
  <div id="scaleable2">
    <h1>Something</h1>
  </div>
</div>
Dougui
  • 7,142
  • 7
  • 52
  • 87
  • What do you mean exactly when you say `Is there a way to resize it` – Rainbow Sep 05 '18 at 18:01
  • The container should be resized to fit the content inside. In the example, there is 200px of gray space between #scaleable1 and the bottom of #container1 – Dougui Sep 05 '18 at 18:05
  • 1
    That's because you scaled it to be smaller, keep in mind that scaling is only a visual effect, it does not affect the element's height or width, if you'd check it programmatically you'd find it still `100px` – Rainbow Sep 05 '18 at 18:22
  • Possible duplicate of [CSS transform: scale does not change DOM size?](https://stackoverflow.com/questions/32835144/css-transform-scale-does-not-change-dom-size) – Serg Chernata Sep 05 '18 at 20:18
  • a hack would be to put a max-height of 50px (100/2) in container1 css to get the appearance you want.. it's not ideal though – Rachel Gallen Sep 05 '18 at 20:31
  • @SergChernata not a duplicate because the other question is just asking for an explanation, this one though is asking for a possible solution. – Robert Koritnik Sep 20 '19 at 09:40

0 Answers0