0

I'm struggling to apply an aspect ratio to a div that should grow to 100% height of it's parent.

enter image description here The map div should grow to the height of the card (with is defined by the amount of text) and also maintain a squared 1:1 ratio.

I saw working solutions if the div is using 100% width (like here: https://tailwindcss.com/course/locking-images-to-a-fixed-aspect-ratio) But it's not working when I want to have height:100% and therefore using padding-left/right:100%

This is currently my not working attempt:

<div class="row">
    <div
      style="position: relative; height: 100%; padding-left:100%"
    >
      <div
        style="position: absolute; height: 100%; width: 100%;">
        #map
      ></div>
    </div>
    <div class="col pt-2">
      <h5>Title</h5>
      <p>Subtitle</p>
      <p>Subtitle</p>
      <p>Subtitle</p>
      <p>Subtitle</p>
    </div>
  </div>
cwiesner
  • 934
  • 1
  • 8
  • 24

1 Answers1

-2

If I understood well, you want to dynamically change the map box width and height based on the text size. Is so, follow this code:

<div class="wrapper">
  <div class="map">
    <p>Map</p>
  </div>

  <div class="content"> 
    <h1>Title</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  </div> 
</div>

CSS:

.wrapper {
  display: flex;
  border: 1px solid gray;
}

.map {
  background: gray;  
}

.content {
  background: white;
  flex: 1;
}

jQuery script:

$( window ).on("load resize", function() {  
  var width = $('.map').height();  
  $('.map').width(width);
});
Leon Vuković
  • 489
  • 3
  • 16