Responsive layout - grid with image
Hi everyone,
I was asked to create a layout of a table next to an image. There were a few constraints:
* The table declare its width
* The image aspect ratio is 16 / 9
* Table and image should be aligned (table should be scrollable if content does not fit)
* Both image and table should not overflow, there should not be scroll and the padding bottom should not be exceeded
Attaching a codepen with my approach which doesnt seem to work if the screen is too wide (which makes the image height too big and causes scroll) . This is a rough abstraction as I develop using angular and there are many many components (hence the nesting of html tags that might seem not required) and the image should be a drawable canvas which I will have to deal with later on.
https://codepen.io/AllHailJojoba/pen/ZEdNdvw
From angular perspective:
Each section is a component (table and resizable canvas) and the article is the layout I place both of them in
2 Replies
If I understood correctly, you need to add this to css:
.image img{
object-fit:cover;
}
or remove the image from html and add it as a cover in the css like this:
.image{
background-image:url(https://picsum.photos/1920/1080);
background-size:cover;
background-position:center center;
}
depends on the final result you wanna achieve.
I guess the description was somewhat confusing
The issue is not that not the whole image is shown - the issue is that the image element is too large and "spils down" causing a scroll
I try calculating the
max-height properly according to the parent element client-height but it doesn't seem to work as well.
I will try to explain better what I try achieving and it might help - I try to add a table next to an image. The table should have min width. The image should be as large as it can while keeping the original aspect ratio and not causing any scroll.
The solution I came up with works fine when using smaller monitors but once the width is too large, the image takes the whole remaining space, and since it has static aspect ration it height gets more than the parent allows causing a scroll.