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
Ylli
Ylli•14mo ago
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).
Joao
Joao•14mo ago
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?
Ylli
Ylli•14mo ago
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.
Joao
Joao•14mo ago
You could have each box be of a fixed width and overflow hidden, and the image can go inside of the box.
Ylli
Ylli•14mo ago
No description
Joao
Joao•14mo ago
What does the HTML look like for one of these boxes?
Ylli
Ylli•14mo ago
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>
Ylli
Ylli•14mo ago
No description
Ylli
Ylli•14mo ago
No description
Ylli
Ylli•14mo ago
Html and Css for it.
Joao
Joao•14mo ago
Is this something like what you're after?
No description
Joao
Joao•14mo ago
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.
Ylli
Ylli•14mo ago
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.
Joao
Joao•14mo ago
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
Joao
Joao•14mo ago
No description
Joao
Joao•14mo ago
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.
No description
Ylli
Ylli•14mo ago
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.
Joao
Joao•14mo ago
Or, set the aspect ratio to 1/1 and increase the scale just slightly to cover the gaps:
.gallery__item--rotate img {
transform: rotate(-95deg) scale(1.1);
aspect-ratio: 1/1;
}
.gallery__item--rotate img {
transform: rotate(-95deg) scale(1.1);
aspect-ratio: 1/1;
}
Joao
Joao•14mo ago
This works quite well actually:
No description
Joao
Joao•14mo ago
Here you can see how it works a bit better:
Ylli
Ylli•14mo ago
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.
Ylli
Ylli•14mo ago
No description
Ylli
Ylli•14mo ago
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
Joao
Joao•14mo ago
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.
Ylli
Ylli•14mo ago
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.
Joao
Joao•14mo ago
Yeah that's a classic 😂 I usually just walk away after a few hours and let my brain work it out in the background
Want results from more Discord servers?
Add your server