Auto scale a div with background to fit into its parent using CSS - Html

ManirajMurugan
March 10, 2023
294 views
2 votes
4 Answers

I am making a application layout that consists of left and right section.

.container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.leftSection {
  flex: 0.7;
  background-color: #ccc;
}

.rightSection {
  flex: 0.2;
  background-color: #ccc;
}

<div class="container">
  <div class="leftSection">
    Left Section
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>

In this the .rightSection div will be as it is, and need to look only into left section.

The left section will have a background image with some space in which I need to include the sub component diagram’s.

The background image will be like,

And the expected result of filling the sub components is like,

So I have tried to fill the left section like,

.container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.leftSection {
  flex: 0.7;
}

.rightSection {
  flex: 0.2;
  background-color: #ccc;
}

.bgContainer {
    background-image: url('https://i.stack.imgur.com/AfygH.png');
    height: 401px;
    width: 688px;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
}


.coil {
    position: absolute;
    top: 49.55%;
    left: 24.3%;   
}
.evaporator {
    position: absolute;
    top: 7.25%;
    left: 54.5%;
}
.compressor {
    position: absolute;
    top: 53.15%;
    left: 59.2%;
}

<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
        <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>

So far everything is fine. But I am implementing this in for tablet screen’s where the width of the device will start from 600px to 1400px .

So i need to make this section responsive across all the devices starting from width 600px to 1400px.

So I breakdown setting up some width to the parent div considering it as device width like 600, 1024, and 1200(just for eg..,) I have made it like this static width.

.first {
  width: 600px;
  border: 2px solid #000;
  margin: 30px;
}

.second {
  width: 1024px;
  border: 2px solid #000;
  margin: 30px;
}

.third {
  width: 1200px;
  border: 2px solid #000;
  margin: 30px;
}

.container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.leftSection {
  flex: 0.7;
}

.rightSection {
  flex: 0.2;
  background-color: #ccc;
}

.bgContainer {
    background-image: url('https://i.stack.imgur.com/AfygH.png');
    height: 401px;
    width: 688px;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
}


.coil {
    position: absolute;
    top: 49.55%;
    left: 24.3%;   
}
.evaporator {
    position: absolute;
    top: 7.25%;
    left: 54.5%;
}
.compressor {
    position: absolute;
    top: 53.15%;
    left: 59.2%;
}

<div class="first">
<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
        <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>
</div>

<div class="second">
<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
        <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>
</div>

<div class="third">
<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
        <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>
</div>

In this above snippet, inside .first, the left section comes out and in .second and third also its in different position.

So finally my requirement is how to make the left section with background image to be responsive along with all tablet screens starting from 600 pixels to 1400 pixels at least.

In real application: Right now my main issue is that the design goes out of the screen’s mostly at bottom like,

I have tried using transform: scale(2.0); but still the left section goes beyond the screen. as like the above image, should I need to calculate this scale value dynamically? Kindly please help me to get out this problem as I am struggling for very long time.

Update1:

If I give width to specific div like,

.coil {
  position: absolute;
  top: 49.55%;
  left: 24.3%;
  width: 17%;
}

.evaporator {
  position: absolute;
  top: 7.25%;
  left: 54.5%;
  width: 12%;
}

.compressor {
  position: absolute;
  top: 53.15%;
  left: 59.2%;
  width: 13%;
}

then I get issues when the device height is smaller or larger.

After the implementation,

The below screenshot is captured in the screen viewport with height: 844 and width: 1280

The below screenshot is captured in the screen viewport with height: 552 and width: 1024

Answers

- Waradu
- March 13, 2023 at 9:25 pm
- 0 votes
0
Maybe try this CSS code for the .container class using background-size: cover:
```
.container {
  background-image: url('https://i.stack.imgur.com/AfygH.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin: 0 auto;
}
```
Login or Signup to reply.

First, we could just make the background image as normal block so that it will be the main width and height. Then we can set the width of the image to 100% and With background image being like that, it will maintain its aspect ratio. Since you manually calculate the top, left positions for the components, why not manually calculate the width as well:

.container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.leftSection {
  flex: 0.7;
}

.rightSection {
  flex: 0.2;
  background-color: #ccc;
}

.bgContainer {
  background-repeat: no-repeat;
  position: relative;
  margin: 0 auto;
}

.bg-img {
  display: block;
  width: 100%;
}

.coil {
  position: absolute;
  top: 49.55%;
  left: 24.3%;
  width: 17.4418605%;
}

.evaporator {
  position: absolute;
  top: 7.25%;
  left: 54.5%;
  width: 11.627907%;
}

.compressor {
  position: absolute;
  top: 53.15%;
  left: 59.2%;
  width: 13.0813953%;
}

.component img {
  display: block;
  width: 100%;
}

<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
      <img src="https://i.stack.imgur.com/AfygH.png" class="bg-img" />
      <div class="component coil">
        <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
      </div>
      <div class="component evaporator">
        <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
      </div>
      <div class="component compressor">
        <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
      </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>

This should be responsive for all devices. You could also automate the calculating with javascript if you really need to, but I made this solution fixed because you manually calculate the top, left positions.

With in document SVG, you can use the SVG as any other regular image and size it to your requirements, while still being able to access the HTML making up the SVG and modify its CSS properties.

tl;dr

create a display: none in doc SVG
put the external images in a symbol element with an id in the defs section.
use the the symbol in your regular HTML with <svg><use href="#the_id"></use></svg>

read

Because the entire SVG is treated as a single image, all elements in that SVG will stay in their respective locations and scale proportionally without requiring any CSS to position or resize them.

This is what I did for the snippet:

Created a SVG with given images at at orginal size (688x401px) with SVGEdit V7.
Added the SVG to the HTML as an in document SVG, enabled it to stretch with given ratio 688:401.
Used a main Flexbox container holding the SVG and a text panel.
Defined a few size constraints forcing Flexbox to wrap for responsiveness. You can easily modify the flex and min-width in elements .spec and .info to meet your requirements.
Embedded the heating component images in <a> to show that you can use regular HTML tags in a SVG.
Kept the CSS and HTML purposely to a bare minimum.

(The demo uses a 3:2 ratio for the panels (the flex values) and min-width: 20rem (360px minus left/right spacing) to force the wrap).

snippet

*   { outline: 1px dashed } /* for debugging */

/* Globals */
*    { box-sizing: border-box }
body { margin: 0; width: 100%; min-height: 100vh }
a    { color: inherit }

/* DEMO */
.container { display: flex; flex-flow: row wrap }
svg        { display: block; width: 100%; height: 100% }

/* Toy with 'flex' and 'min-width' values */
.spec { flex: 3; min-width: min(20rem, 100%); aspect-ratio: 688 / 401 }
.info { flex: 2; min-width: min( 8rem, 100%); align-self: stretch }

.info { padding: 1rem }

<div class="container">
    <div class="spec"><svg><use href="#svg-heating"></use></svg></div>
    <div class="info">
        <h3>Panel</h3>
        <p>Lorem ipsum dolor sit amet, aeterno facilisi accusamus no pri. Per aeque pertinacia eu. Ut eum enim oporteat, eruditi abhorreant ex est, ferri eirmod appellantur ius ex. Per volutpat argumentum eu. Deterruisset consequuntur nam ex, pro ea elit mazim, an graeco facilisi mea.
        <p>Ad quodsi deleniti placerat vel, vis minim dolores no. Volumus partiendo id ius, sit ne habeo utamur inimicus. Vulputate mnesarchum sit no, essent possim ocurreret te has, et pro modo urbanitas. His facilisis honestatis ex.
    </div>
</div>


<!-- hidden, in document SVG -->
<svg style="display: none" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
    <defs>
        <symbol id="svg-heating" viewBox="0 0 688 401">
            <image id="svg_bg" height="401" width="688" x="0" xlink:href="https://i.stack.imgur.com/AfygH.png" y="0" />
            <a href="javascript:void(0)"><image id="svg_coil" height="90"  width="120" x="168" xlink:href="https://i.stack.imgur.com/SKUms.png" y="199"/></a>
            <a href="javascript:void(0)"><image id="svg_evap" height="70"  width="80"  x="375" xlink:href="https://i.stack.imgur.com/spv58.png" y="29" /></a>
            <a href="javascript:void(0)"><image id="svg_comp" height="120" width="90"  x="408" xlink:href="https://i.stack.imgur.com/fzSaH.png" y="213"/></a>
        </symbol>
    </defs>
</svg>

<div class="container">
  <div class="leftSection">
    <div class="subContainer">
      <!-- Your subcomponents here -->
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>





    .container {
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .leftSection {
      flex: 0.7;
      background-color: #ccc;
    }

    .rightSection {
      flex: 0.2;
      background-color: #ccc;
    }
    <div class="container">
      <div class="leftSection">
        Left Section
      </div>
      <div class="rightSection">
        Right Section
      </div>
    </div>


enter code here

Please signup or login to give your own answer.

Click here to cancel reply.

Auto scale a div with background to fit into its parent using CSS – Html

Answers