CODEWITHSUNDEEP
javascriptjquerycss
Jason Butera
Jason Butera

Reputation: 2450

CSS Scale (not resize) a DIV horizontally to 100% of its parent container

I've got a DIV that has a fixed size of its background image.
I use relative positioning on child elements to display data where it needs to be shown at the appropriate location on the image.
However, I'd like the DIV to actually be 100% width of its parent container and to grow and shrink horizontally (scale) without disturbing the layout of the child element positioning and size?
I'm guessing I'll have to use a combination of CSS transform/scale and javascript...

<div id="my-width-changes-according-to-the-window-size">
   <!--
Even though the following DIV is 800px wide, I'd like it to stretch horizontally 100% 
to the parent width and scale proportionally because the text size and location of the 
inner divs are important in labeling the background image 
   -->
  <div style="background-image:url('my.png');width:800px;height:367px;position:relative;">
    <div style="position:absolute;left:80px; top:120px;font-size:14px;">value</div>
    <div style="position:absolute;left:200px;top:300px;font-size:14px;">value</div>
    <div style="position:absolute;left:450px;top:80px; font-size:14px;">value</div>
  </div>
</div>

Let's say it looks like this: x

Now I want it to behave basically like an image using object-fit:contain where it will fill its parent container as the window is resized...resizing text and all. So if the parent container is now smaller, I want it to look like this...basically scaled down or larger:

x

Upvotes: -4

Views: 72

Answers (0)

Related Questions