Resizing window with SVGs

Question

I've got the current HTML being rendered:

This renders out like this:

The goal is that on resizing the browser window, I'd like to keep the aspect ratio of the image, as well as have the SVG's resize to maintain position and shape inside the grid image. I've tried setting the height on the img-container div to auto, which does maintain the ratio for the image. But the SVGs still resize in a manner that doesn't make sense to me:

I've tried changing the height on the divs surrounding the SVGs to auto, and they look the right size, but the locations are off:

My question is how can I achieve the goal of resizing the window, and keeping the aspect ratio of the image and SVGs, as well as keeping the SVGs in the location on the grid image?

EDIT: I should clarify that ultimately, the grid image can be any image. I'm just using it as a template and guide to achieve the goal. Ultimately, whatever image is there along with any SVGs would need to resize appropriately together so that they always have the same look.

user_15015675 · Answer

I'd rather recommend a css grid or svg layout to keep aspect ratios.

Absolute positioning is rather complicating responsive layouts.
Edit: New example added using absolute positions.

Example1: Svg grid layout

Including tiles/columns in one parent svg

let resize = document.querySelector('.resize');

function setWidth(width) {
  resize.style.width = width + '%';
}

.resize {
  overflow: auto;
  padding: 1em;
  border: 1px solid #ccc;
  resize: both;
  width: 100%;
}

.svg-grid {
  width: 100%;
}

:root {
  --transX: translateX(0);
  --transY: translateY(0);
}

.col {
  transform: var(--transX) var(--transY);
}

.row-2 {
  --transY: translateY(100px);
}

.row-3 {
  --transY: translateY(200px);
}

.col-2 {
  --transX: translateX(100px);
}

.col-3 {
  --transX: translateX(200px);
}

.col-4 {
  --transX: translateX(300px);
}

Based on Temani Afif's answer: How can I apply multiple transform declarations to one element? we can use css-variables to get a pseudo svg-grid.
All svg grid elements are basically positioned at x/y=0 and moved by row and column classes setting transform properties like transform: translateX(0) translateY(100) to meet grid column/row positions.

Example2: CSS grid approach (using inlined svgs)

let resize = document.querySelector('.resize');
function setWidth(width){
  resize.style.width = width+'%';
}

* {
  box-sizing: border-box;
}

.resize {
  overflow: auto;
  padding: 1em;
  border: 1px solid #ccc;
  resize: both;
  width: 100%;
}


.aspect4-3 > * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.aspect4-3:before {
  content: "";
  padding-top: 75%;
  display: block;
}

.gridWrpOuter {
  display: grid;
  width: 100%;
  position: relative;
  grid-gap: 0px;
}

.gridWrp {
  display: grid;
  grid-template-columns: [col1] 25% [col2] 25% [col3] 25% [col4] 25%;
  grid-template-rows: [row1] 33.333% [row2] 33.333% [row3] 33.333%;
  grid-gap: 0px;
  outline: 1px solid red;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.col {
  width: 100%;
}

.col-2 {
  grid-column-start: col2;
  grid-column-end: col3;
}

.col-3 {
  grid-column-start: col3;
  grid-column-end: col4;
}

.col-4 {
  grid-column-start: col4;
  grid-column-end: 100%;
}

.row-2 {
  grid-row-start: row2;
  grid-row-end: row3;
}

.row-3 {
  grid-row-start: row3;
  grid-row-end: 100%;
}

Example 3: grid based on relative/absolute positions

let resize = document.querySelector('.resize');
function setWidth(width){
  resize.style.width = width+'%';
}

* {
  box-sizing: border-box;
}

.resize {
  overflow: auto;
  padding: 1em;
  border: 1px solid #ccc;
  resize: both;
  width: 100%;
}

.aspect4-3 > * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.aspect4-3:before {
  content: "";
  padding-top: 75%;
  display: block;
}

.gridWrp {
  display: block;
  width:100%;
  position: relative;
  outline: 1px solid red;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.col {
  width: 25%;
  height: 33.333%;
}

.col-2 {
  left: 25%;
}

.col-3 {
  left: 50%;
}

.col-4 {
  left: 75%;
}

.row-2 {
  top: 33.333%;
}

.row-3 {
  top: 66.666%;
}

It's crucial to define an aspect ratio for the parent grid element like so:

.gridWrp{
  aspect-ratio: 4/3;
}

Or use the aspect ratio padding workaround.

user_14295919 · Answer

You're already using height="97" width="97" to your rect block, you should update that to height="auto" min-width="97"

Resizing window with SVGs

2 Answers

Example1: Svg grid layout

Example2: CSS grid approach (using inlined svgs)

Example 3: grid based on relative/absolute positions