Question 42713 in Html Question posted in
Some basic documentation can be found here.

Automatically resize children in width and height following the aspect ratio based on the container dimensions – Html

I am trying to achieve a responsive layout where I have two cards next to each other that need to grow and shrink in the width and height based on the dimensions of the container. The following image shows what I am trying to achieve and a codepen with two examples.

I essentially want the two examples from the codepen together. That either resizing the height or width changes the cards to the correct width and height following the 1/1 aspect and that overflow never happens.

two cards in 1 container

In the codepen I have two examples, in the first container the cards grow when you increase or decrease the width. In the seconds container, the cards grow or shrink when you change the height of the container. https://codepen.io/aspyryan/pen/mdzVMpg

This is essentially what I want to fix, the cards should be resized instead of growing outside of the container:
The initial problem

this is my html:

<div class="container">
  <div class="test">
    <div class="el"></div>
    <div class="el"></div>
  </div>
</div>

<div class="container2">
    <div class="el el2"></div>
    <div class="el el2"></div>
</div>

with the css:

.container {
  resize: both;
  overflow: auto;
  width: 300px;
  heigth: 300px;
}

.test {
  border: 2px solid blue;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.container2 {
  resize: both;
  overflow: auto;
  width: 500px;
  height: 200px;
  border: 2px solid blue;
  display: flex;
  flex-direction: row;
}

.el {
  display: block;
  flex: 1;
  aspect-ratio: 1/1
}

.el2 {
  flex: 0!important;
}

.el:first-of-type {
  background-color: red;
}

.el:last-of-type {
  background-color: blue;
  
}
Tags:

2

Answers


  1. 0

    I don’t know if that really answer your request.
    What about defining an outer container. This will have a "size", the size you want. In fact with 2 elements, aspect ratio 2/1.
    Inside you define a grid for the 2 elements with width and height 100%.

    .outerContainer {
  aspect-ratio: 2 / 1;
  height: auto;
  background-color: #00fe00;
}

.oc1 {
  width: 300px;
}

.oc2 {
  width: 600px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  gap: 10px;
  width: 100%;
  height: 100%;
}

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

.el:first-of-type {
  background-color: red;
}

.el:last-of-type {
  background-color: blue;
}
    <div class="outerContainer oc1">
  <div class="container">
    <div class="el"></div>
    <div class="el"></div>
  </div>
</div>
<div class="outerContainer oc2">
  <div class="container">
    <div class="el"></div>
    <div class="el"></div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    try that and adapt it, I don’t have rest of your code, not easy to answer exactly, but you have main idea to adapt…
    the idea is always to have somewhere a defined size, here container, and all other values are base in percentage on this one

    .container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr;
  justify-items: center;
  width: 300px;
  border: 1px solid #000000;
}

.twoSquares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  gap: 10px;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 1;
}

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

.el:first-of-type {
  background-color: red;
}

.el:last-of-type {
  background-color: blue;
}
    <div class="container">
  <div class="twoSquares">
    <div class="el"></div>
    <div class="el"></div>
  </div>
  <button style="margin:1em 0">start registrate</button>
  <img src="https://picsum.photos/200/200" alt="">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search