v1.6.0 Changed the thumbnails in the image results to squares - how to get full aspect ratio thumbs back?

[Tom2112]

v1.6.0 Changed the results thumbnails from full aspect ratio of the image to squares, cutting off significant image real estate for non-square images. How do I get the full aspect ratio (portrait, landscape, 3:4, 4:3, etc.) thumbs back?


For example: the first image thumb looks acceptable, but when you have to zoom in to see the rest of the image, you can see that the faces are distorted. But you couldn't see that with the square thumbnail.

[missionfloyd]

Put this in user.css.

Fit the image inside the button

.thumbnail-item > img {
    object-fit: contain !important;
}

or

Fit the button around the image

.thumbnail-item {
    aspect-ratio: auto !important;
}

[Tom2112]

Thank you very much!
Where do I find the user.css file? I've searched my automatic1111 folder and subfolders, but I'm not finding it. I'm on Windows 10.

[Tom2112]

Nevermind, I figured it out. I just made a user.css file in my stable diffusion base directory and restarted automatic1111.

Thanks again!

[Tom2112]

For anyone reading this later, here's a couple additional tips to make your txt2img and img2img gallery (results) window bigger and nicer:
Put this in your user.css file:
.thumbnail-item {
aspect-ratio: auto !important;
}

#txt2img_gallery, #img2img_gallery{
min-height: 80vh;
}

#txt2img_gallery_container, #img2img_gallery_container {
height: 80vh !important;
}

#txt2img_gallery > .grid-wrap, #txt2img_gallery > .preview,
#img2img_gallery > .grid-wrap, #img2img_gallery > .preview{
max-height: 80vh;
}

The first section makes your thumbnail aspect ratio match the image aspect ratio.
The second section makes your gallery size to 80% of the vertical resolution of your browser window. This fits nicely and takes up the whole display without needing to scroll to see the whole gallery and not having gallery elements off the screen.
The third section does the same for the gallery container, making it fit the gallery.
The fourth section makes the the scrolling section inside the gallery (when you have many thumbs to scroll through) fit the whole gallery container.
At least that's what I think those things do, and from my testing it works nicely.

Examples of how it looks on a 16:9 monitor with the browser maximized:

[rubberbaron]

The second solution, "fit the button around the image", works for tall images but not for wide images:

[missionfloyd]

@rubberbaron

.thumbnail-item {
    aspect-ratio: auto !important;
    width: fit-content;
    height: fit-content;
}

[noisefloordev]

Changing the thumbs to squares doesn't make sense. We've all been picking sample images that look good in the portrait view, and now they're all broken. Please don't make everybody have to use CSS overrides to fix the thumbnail view...

[Woisek]

Changing the thumbs to squares doesn't make sense.

Makes perfect sense, as you can generate only vertical, only horizontal or mixed images. While the first two possibilities are easy to display to look neat, the third possibility breaks the look very obviously. So to make this work, it's logic to use a format for both and that's a square. With that, you can display a 2000px wide image besides a 2000px tall image and it won't break the display. Plus, it's simpler to manage.

We've all been picking sample images that look good in the portrait view, and now they're all broken.

Like I said, there is also portrait mode. And what exactly is 'broken'? You look at a preview, not the whole image. And no image is harmed when displaying as a thumbnail.

[Tom2112]

No, the part that doesn't make sense is that the thumbs were cropping the image. So you can't see the whole image in the thumb, forcing the user to click through each one instead of being able to assess them quickly at a glance.
Also, what you're describing makes sense for a group of mixed aspect ratio images, but this is only displaying your image generations - which will all be the same aspect ratio because they're all coming from the same batch using the same generation resolution as each other. So it makes more sense to show the thumbs in the same aspect ratio as the full image - rather than inside a fixed size square - so that it maximizes the display real estate - showing the largest number of thumbs in the largest resolution that fits.
Also, the part that doesn't make sense is that it worked just fine before. Why go to the effort to change it only to make it less useful?

[Woisek]

No, the part that doesn't make sense is that the thumbs were cropping the image.

It makes perfect sense, because then you don't have wasted/blank/black/white/whatever space on one or the other side.

So you can't see the whole image in the thumb, forcing the user to click through each one instead of being able to assess them quickly at a glance.

Seriously, if you have troubles to 'assess them quickly at a glance' just because there are some pixels cut off, you got much serious problems than cropped images. What exactly is it you can't grasp, when some pixels are missing on such tiny images? You have to click on them anyway for some kind of judgment or even open them in a image viewer to be really sure.

Also, what you're describing makes sense for a group of mixed aspect ratio images, but this is only displaying your image generations - which will all be the same aspect ratio because they're all coming from the same batch using the same generation resolution as each other.

That only is true as long someone decides to write a script that swaps the aspect ratio during batch process.

So it makes more sense to show the thumbs in the same aspect ratio as the full image - rather than inside a fixed size square - so that it maximizes the display real estate - showing the largest number of thumbs in the largest resolution that fits.

No, sorry, this makes no sense. It's just like on a 'normal' website. The purpose of a thumbnail is to give you the possibility to 'assess the image quickly at a glance' and if you want or need more info, you click on it. Using squares is the maximum and optimal use of screen estate because no matter what image ratio you have or use, it's display always a the same size. The same size means also I know how much space I need for displaying x thumbs. Every time.

What you believe that is would be better is a constant juggling of the space that can be used. I can obviously display more portrait thumbs in a row then the same size in landscape. That means, when I can fit i.e. 8 portrait thumbs neatly in a row, it then can fit only 6 or even less, landscape ones, leaving a ugly gap on the right.
And for what purpose? Like I said, you have to click them anyway to see them full.

Instead of this, what really is bothering, is that when a thumb is clicked, the image is displayed upscaled in the light box and we have to constantly click the zoom reset button. THAT is a problem, not the thumbs that do, for what they are supposed to do ...

[Tom2112]

Clearly, you did not read the whole post. If you did, you're just being willfully ignorant.

[Woisek]

Yeah ... probably ... 😒