CODEWITHSUNDEEP
tailwind-css
Dusto
Dusto

Reputation: 55

Create a collage of images in CSS without fixed widths or heights

I have been trying to figure out, how to create a collage of images, following my design expectation. I wanted to mention, that I am using Tailwind, because you will find css classes in my code.

My expectation (ignore the colors):

my wished result

And what I am stuck with:

enter image description here

So in other words, I want the parent container to be as wide as the first/main image. After achieving this, the smaller images will autosize, so don't worry about them.

My code for this Container:

<div class="product-images lg:w-1/3 my-10 bg-bg_color rounded-2xl">
            <div class="flex flex-col p-4 gap-y-2 items-center">
                <img src="{{ asset('img/man.jpeg')}}" alt="">
                <div class="small-images flex gap-x-2">
                    <div><img src="{{ asset('img/man.jpeg')}}" alt=""></div>
                    <div><img src="{{ asset('img/man.jpeg')}}" alt=""></div>
                    <div><img src="{{ asset('img/man.jpeg')}}" alt=""></div>
                </div>
            </div>
        </div>

Upvotes: 1

Views: 398

Answers (1)

Dusto
Dusto

Reputation: 55

I finally found a solution to my problem! The answer is inline block.

My source for the solution: Codepen snipet

Well now my result looks like this and I am satisfied:

enter image description here

And I cleaned up the css classes and divs and at the end it looks like this:

<div class="inline-block p-4 bg-bg_color rounded-2xl">
                <img class="rounded-3xl" src="{{ asset('img/man.jpeg')}}" alt="">
                <div class="small-images flex gap-x-2 mt-2" style="width: min-content; min-width: 100%">
                    <div><img class="rounded-xl" src="{{ asset('img/man.jpeg')}}" alt=""></div>
                    <div><img class="rounded-xl" src="{{ asset('img/man.jpeg')}}" alt=""></div>
                    <div><img class="rounded-xl" src="{{ asset('img/man.jpeg')}}" alt=""></div>
                </div>
            </div>

Upvotes: 1

Related Questions