0

I'm a newbie developing a website to support an IoT project and I have a div I would like to be supported by an auto-scaling script, in case it doesn't fit the window (either horizontally, vertically or both), more specifically, if the content is bigger than the window. Below i'm presenting you the CSS for the div in question. The code below was made to center the div horizontally and vertically:

div.container 
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
    display: grid;
    padding: 0;
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
}

I'm looking for some kind of automatic zoom out feature since there are child divs strategically placed and just changing the parent div size would tare apart the placements. I'm leaving this question in the community because all the CSS and scripts I used had no effect. I don't know if it has to do with the browser or if some lines of the CSS above messed with the presented solutions I'd came across. Ideally, I think it would be better to solve the scaling with some javascript or jquery to prevent more confusion in the CSS. But I'm open to all possible solutions. Thank you in advance.

Mohammad Ali Rony
  • 4,695
  • 3
  • 19
  • 33
S. Alimento
  • 1
  • 2

1 Answers1

0

read in this answer how to get sizes in plain JS or jQuery, then read out how to transform-scale your div with CSS or in plain JS or jQuery

Just don´t forget not to mess with user´s zooming.

lucchi
  • 1,006
  • 6
  • 9