Is there a way to responsively (desktop) style these shapes so they align perfectly in width and height?

Question

For a client I need to have an image and 3 shapes in the hero section. The hero always needs to be 100vh minus the height of the header. I have already worked this out in JS, but I can't figure out how to style the icons in a way they always align perfectly in width and height.

I have tried to put them in a grid, flexbox and absolute values, but none of them seem to do the job. If further information is needed I'd be happy to provide it. This seems so simple in my mind but I just can't find the seemingly easy solution.

Hero section so far

Hero section in design

My html is as follows:

#vormen {
  display: flex;
  align-items: flex-start;
  height: 100vh;
}

#vormen .shape_group {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

#vormen .shape_group svg {
  width: 50%;
  max-height: 50%;
}

#vormen #image_container {
  width: 100%;
  height: 100%;
}

#vormen #image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="fl-html" id="vormen">
  <div id="shapes_1" class="shape_group">
    <svg xmlns="http://www.w3.org/2000/svg" width="471.875" height="471.875" viewBox="0 0 471.875 471.875" id="shape_1">
        <path id="Path_6" data-name="Path 6" d="M0,0,471.875,471.875V0Z" fill="#56c385"/>
      </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="471.214" height="471.214" viewBox="0 0 471.214 471.214" id="shape_2">
          <path id="Path_2" data-name="Path 2" d="M148.612,0,85.48,80.105,22.349,0,7.729,100.94-87,63.132l37.81,94.727-100.942,14.618,80.107,63.132-80.107,63.13,100.942,14.62L-87,408.085l94.725-37.81,14.62,100.94L85.48,391.107l63.132,80.107,14.62-100.94,94.725,37.81-37.808-94.727,100.938-14.62-80.105-63.13,80.105-63.132L220.149,157.859l37.808-94.727L163.232,100.94Z" transform="translate(150.128)" fill="#56c385"/>
      </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="471.216" height="464.556" viewBox="0 0 471.216 464.556" id="shape_3">
          <g id="Group_225" data-name="Group 225" transform="translate(-468.98 -468.853)">
              <path id="Path_3" data-name="Path 3" d="M117.206,0C-12.915,0-118.4,52-118.4,116.138s105.487,116.14,235.608,116.14,235.608-52,235.608-116.14S247.328,0,117.206,0" transform="translate(587.382 701.131)" fill="#56c385"/>
              <path id="Path_4" data-name="Path 4" d="M117.206,0C-12.915,0-118.4,52-118.4,116.138s105.487,116.14,235.608,116.14,235.608-52,235.608-116.14S247.328,0,117.206,0" transform="translate(587.382 468.853)" fill="#56c385"/>
          </g>
      </svg>
  </div>
  <div id="image_container">
    <img src="https://image.shutterstock.com/image-illustration/modern-interior-server-room-data-600w-1717870396.jpg">
  </div>
</div>

score 0 · Answer 1 · answered Oct 04 '22 at 11:12

0

[hi Wouter my below link may help you.... thank you]

[ https://codepen.io/soumenework/full/rNvKrvR ]:

answered Oct 04 '22 at 11:12

UI SMART SOUMEN

58
6

Thanks for helping! Unfortunately the shapes now morph and stretch which isn't the result I'm going for. The shapes need to retain their original shape while still aligning perfectly. – Wouter Pageking Oct 04 '22 at 13:00
Make that image responsive I think it will solve your problem – UI SMART SOUMEN Oct 05 '22 at 04:53
please check... now image is responsive not stretch – UI SMART SOUMEN Oct 05 '22 at 08:20

UI SMART SOUMEN · Answer 2 · 2022-10-05T08:36:04.710

#vormen {
  display: flex;
      width: 100%;
        justify-content: space-between;
/*   align-items: flex-start;*/
  height: 100vh; 
}

#vormen .shape_group {
/*   display: flex;
  align-items: flex-start;
  flex-wrap: wrap; */
      width: 50%;
   border:2px solid red;
}

#vormen .shape_group svg {
/*   width: 50%;
  max-height: 50%; */
}

#vormen #image_container {
   width: 50%;
 /* height: 100vh; */
  border:2px solid red;
}

#vormen #image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.dflex{
  display:flex;
}
 
.pic_responsive img{
     width: auto;
    height: auto;
}
.h-50{
  height:50vh;
}
.align{
  justify-content: space-between;
}
.align_btm{
      display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.align_btm h1{
  line-height:0px;
}

@media( max-width: 780px) { 

  .align_btm h1{
        font-size: 20px;
  }
}

<div class="fl-html" id="vormen">
  <div id="shapes_1" class="shape_group">
     <div class="dflex h-50 pic_responsive align">
    <img src="https://gtdeply.github.io/pic1.png">
       
    <img src="https://gtdeply.github.io/pic2.png">
         </div>
     <div class="dflex h-50 pic_responsive align">
     <div class="align_btm"> 
       <h1> DR RUMITELIJKE</h1>
       <h1> MERKVERTALERS</h1>
       
       </div>
    <img src="https://gtdeply.github.io/pic3.png">
         </div>
  </div>
  <div id="image_container">
    <img src="https://image.shutterstock.com/image-illustration/modern-interior-server-room-data-600w-1717870396.jpg">
  </div>
</div>

hi Wouter , here in top image is not stretch, and i think now the result is as you are looking for — UI SMART SOUMEN, Oct 05 '22 at 09:02

Is there a way to responsively (desktop) style these shapes so they align perfectly in width and height?

2 Answers2