Kevin Powell - Community•15mo ago

Is this possible?

Hi, I´m working in a layout and I have a problem related to composition. What ratio would I have to apply to my second element (column-8) and how would it be calculated so that it had the same height as the previous one (column-4)? Show case: https://codepen.io/segundofdez/pen/ExGEBoZ The real website: https://www.cenlitros.com/grafico Thanks in advanced. I think this is not an easy one

Segundo Fdez

CodePen

grid column problem

...

Cenlitros - Gráfico

Deseño gráfico, de produto e espazos en Galiza, Traballos de deseño gráfico

12 Replies

Kevin Powell•15mo ago

Because grid uses align-items: stretch, if your .column-4 has a height on it thanks to the aspect-ratio, you don't need anything on the .column-8. Remove the aspect-ratio and it'll just match on it's own

SegunOP•15mo ago

Thanks Kevin, the main problem is that I must use and image inside the article (this is the real web: cenlitros.com), but maybe I can try with objet-fit cover and overflow hidden. Let see if works Hi again Kevin, i just update de codepen example to see the real problem with the height. I feel like there has to be some way to fix it, but I can't figure out what the correct calculations would be to make them equally heigh (maybe use vw on height and not aspect-ratio, or %…). I´m not sure if this is possible but just in case I leave the updated example here in case someone can help. https://codepen.io/segundofdez/pen/ExGEBoZ Thanks very much!

Naa•15mo ago

If I'm understanding your problem correctly, remove aspect-ratio from both of your article elements, and set

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

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

SegunOP•15mo ago

Hi Naa, thanks for your answer. The problem with that is that the images would not be the same height

Naa•15mo ago

They are when I change these in your codepen example

SegunOP•15mo ago

Temporarily I just applied those changes but I think it does not work https://codepen.io/segundofdez/pen/ExGEBoZ

SegunOP•15mo ago

here´s the problem

Naa•15mo ago

You didn't update the img css

SegunOP•15mo ago

Ohhhhhhhhh!!! sorry about that

Naa•15mo ago

actually i think that link is still to the older version? but yeah probably still the img element

SegunOP•15mo ago

Yes yes, sorry, you are right, the point is that height: 100% Thank you very much @Naa you just made my day.

Naa•15mo ago

no worries at all :) glad to be able to help

Gaming

Programming

Is this possible?