CSS image aligning problem
Hey everyone! I'm new here so bare with me if I'm not following the guidelines properly.
In my last project I've encountered a 'behavior' that I don't know how to address.
I have 24 images, I'm creating a horizontal scroll using grid. All works well and as expected UNTIL I rotate some of the images in the grid.
Basically what needs to happen is that, 18 of the images are normal, the rest are rotated -95deg + span 2 (while fitting and aligning with the rest of the images).
I've been stuck in this for 3-4 days, googling, youtube, searching up and down and I can't seem to fix it unless I make it too manual.
26 Replies
https://codepen.io/yesm4n/pen/ZEVyeZe
Here is a code pen using (boxes) to make it easier to understand what is the outcome that I'm looking for (with images).
I'm not sure I understand the problem... what exactly are the black boxes supposed to represent, the problem or how you want it to look like?
I'm trying to illustrate the outcome I want, which I can't seem to do with the images.
Because once they are -95deg, they no longer fit because the way with/height works. I tried playing with aspect ratio and so on, but I can't seem to get it right or figure it out.
Here is an image of the actual problem.
You could have each box be of a fixed width and overflow hidden, and the image can go inside of the box.
What does the HTML look like for one of these boxes?
A single div, wrapping 24 other divs (background image) - the 2 tilted images have an extra class for the effect.
<div>
..24 divs here
</div>
Html and Css for it.
Is this something like what you're after?
I would use an additional div for each image, so that you can enforce the width of each "box" and set the overflow to hidden.
I basically want my images to only stretch (width wise) and height remain the same as other images.
I see. I will try and see how that goes. Thanks a bunch.
Mmm the problem I see is with this approach at least is that when the images are rotated they leave some gaps. You'd need to make sure that the images are large enough
This seems to work: fix the height at 100% when the image element is in the gallery (so that other images are not affected) and then when it's rotated apply a fix width that matches the container box.
Yes. I just tried it with the previous comment you offered. It has brought me pretty close. I will try this next one in a minute. Thanks a lot.
Or, set the aspect ratio to 1/1 and increase the scale just slightly to cover the gaps:
This works quite well actually:
Here you can see how it works a bit better:
The only issue with this is that, the img (which is rotated 95deg) is supposed to be a bit wider. Lets say .5 bigger than the regular images.
Here is the actual design. Maybe you will understand better what I'm trying to achieve.
Regular images have 109height/146width -- the bigger ones are 169 height/146width
You don't need to rotate the box itself just the inner image.
That way the box never changes sizes at all, but you also need to set overflow hidden so that the image doesn't grow out of the container.
But if you mean that the image may not look good after the rotation, for example if the chairs here won't show up, then that's another problem but I think at that point it's an art direction decision
If you happen to know in advance which images will be larger, you may have better results simply editing them directly to look the way you need.
Lol. I actually never thought about it that way. I spent 3-4 days trying to solve this with code.
Despite my futile efforts, your help was immense. Thanks a million times.
I'll just rotate the actual image initially, so when its inside html/css box, I can just use regular span 2 / auto property and all should work just fine.
Yeah that's a classic 😂 I usually just walk away after a few hours and let my brain work it out in the background