Make SVG icon get the 100% of grid area height and while width obeys to aspect ratio

Question

Target

The SVG icon's ({) height of must always fill the purple area's height, two merged rows of grid layout.
Width must automatically resize in compliance with icon's aspect ratio.

Initial listing and fiddle


  Lorem ipsum dolor sit amet, consectetur adipiscing elit
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

.Layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 6px;
}

.Layout + .Layout {
  margin-top: 12px;
}

.TopLabel {
 font-size: 14px;
 line-height: 18px;
 background: #BBDEFB;
}

.BottomLabel {
  font-size: 12px;
  line-height: 16px;
  background: #FFECB3;
  grid-row: 2;
}

.IconSlot {
  width: 20px;
  grid-row: span 2;
  order: 3;
  background: #E1BEE7;
}

.OpeningBracketLabel {
  width: 100%;
  height: 100%;
}

Some musings about this problem

I suppose the targets could not be reached without container for SVG icon (if I am wrong please let me know). So I added the .IconSlot.

Just

.OpeningBracketLabel { 
  height: 100%;
}

will not be enough - the layout will brake:

I added the width: 20px; for the .IconSlot temporary: without it, the icon will get too much place:

user_7897395 · Answer

One posible solution to your problem would be using a simpler path: not a filled one but just the stroke. Now you can add preserveAspectRatio="none" to the svg so that it can stretch the image. The problem now is that the stroke would have an irregular stroke-width due to the deformation. In order to avoid the problem you can use vector-effect="non-scaling-stroke" for the path.

Since you want to have a dry code you may avoid repeating the code for the path by using a element the second time you need it.

.Layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 6px;
}

.Layout + .Layout {
  margin-top: 12px;
}

.TopLabel {
 font-size: 14px;
 line-height: 18px;
 background: #BBDEFB;
}

.BottomLabel {
  font-size: 12px;
  line-height: 16px;
  background: #FFECB3;
  grid-row: 2;
}

.IconSlot {
  width: 20px;
  grid-row: span 2;
  order: 3;
  background: #E1BEE7;
}

.OpeningBracketLabel {
  width: 100%;
  height: 100%;
}


  Lorem ipsum dolor sit amet, consectetur adipiscing elit
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  
    
  



  Lorem ipsum dolor sit amet, consectetur adipiscing elit
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

user_15335954 · Answer

You could add a position:absolute to the svg and remove the width from the parent div

.Layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 6px;
}

.Layout+.Layout {
  margin-top: 12px;
}

.TopLabel {
  font-size: 14px;
  line-height: 18px;
  background: #BBDEFB;
}

.BottomLabel {
  font-size: 12px;
  line-height: 16px;
  background: #FFECB3;
  grid-row: 2;
}

.IconSlot {
  position: relative;
  width: 50px;
  grid-row: span 2;
  order: 3;

}

.OpeningBracketLabel {
  position: absolute;
  height: 100%;
    background: #E1BEE7;
}


  Lorem ipsum dolor sit amet, consectetur adipiscing elit
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  
    
  



  Lorem ipsum dolor sit amet, consectetur adipiscing elit
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Make SVG icon get the 100% of grid area height and while width obeys to aspect ratio

Target

Initial listing and fiddle

Some musings about this problem

2 Answers