XF 2.2 How to display the article images/thumbnail as full and stretch not crop?

[rdn]

Not sure though what specific CSS I can use or change from this :|.

.message--articlePreview .articlePreview-image {
    background: center/cover #edf4fa no-repeat;
}

 

[Paul B]

Changing that line to this will show the full image: background: center / contain #edf4fa no-repeat;.

However, there will be areas/gaps around the image due to forcing it into a space which it doesn't have native dimensions of.

Add this to the extra.less template:

.message--articlePreview .articlePreview-image
{
    background-size: contain;
}

 

[rdn]

Not possible to stretch them and fill all the space?
Thanks Brogan.

 

[Paul B]

Stretching images to fit spaces is never a good idea - it just deforms them and looks bad.

Either crop or keep the same ratio.

 

[rdn]

With background-size I think it's not possible to specify background color also, so I use:

.message--articlePreview .articlePreview-image {
    background: center / contain @xf-paletteNeutral3 no-repeat;
}

 

[Paul B]

That or this would work - whichever you prefer:

.message--articlePreview .articlePreview-image
{
    background-size: contain;
    background-color: @xf-paletteNeutral3;
}

 

[rdn]

Is it possible to display a blank background color for threads without attachment also?
So the display will be uniform.

Thanks.

 

[Paul B]

I'm not sure what you mean.

Do you mean to basically have an empty black placeholder above the thread title?

 

[rdn]

Do you mean to basically have an empty black placeholder above the thread title?

Yes with just the CSS BG color on it.

 

[Paul B]

It would require a template edit - the CSS is compiled differently for threads with images.