Scale a big div inside a little div

user_5905472 0
Viewed 123

I have a .little block, which is always has 300px width. And i have .big block, which may have 500px, 800px, 1000px, etc. I need a solution, how to show big div inside a little. Without overflow:scroll; or overflow:hidden;. I need a solution by scaling.

Like when you open desktop website version on a phone and it shows all website without horizontal scrolling or like big image can be covered inside an little block.

<div class="little">
  <div class="big">
    Text, images and other content 
  </div>
</div>

.little{
  width: 300px;
  height: 300px;
}
.big{
  width: 800px; /*can be different*/
  height: 1000px;  /*can be different*/
}
css html javascript
1 Answers

Have you try to set specific CSS if your big div is inside your little div using max-width and max-height ?

.little{
  width: 300px;
  height: 300px;
}
.big{
  width: 800px; /*can be different*/
  height: 1000px;  /*can be different*/
}
.little .big {
  max-width: 300px;
  max-height: 300px;
}
user_15069140
Related