How to limit the max height of ALL intro images in blog view

goldqa

Is there any way using high-level controls of limiting the max height of ALL the intro images in blog view to a given size? If not high-level, can someone recommend the css structure I should use and where it should be inserted? Many Many Thanks!

Please note that I am marking this as a bug although it really is NOT. What "Issue Type" should I give it? Thanks.

saguaros

Hi goldqa

You can try with this:

.blog .item .item-image img {
    max-height: 200px;  /*change to your desired value*/
}

goldqa

Hi saguaros,

Many thanks for the solution. The good news - it worked immediately in that it impacted the image. The bad news - when I tried to change to 120px and then to 10em I am not getting any results. Even when I switched back to 200px. As if the override does not happen any more for this, although I know it does for other elements. I cleared Joomla's cache and Firefox cache (content) - nothing.

This is what I added to the custom.css file, through Joomla's backend:
// GS: tweaks for the images
.blog .item .item-image img {
max-height: 120px; /change to your desired value/
}

Also, would you happen to know if I should use em and "how many"?

Thank you in advance for your help.

goldqa

Just to close the loop and answer my own question. Maybe others will benefit.

Mr. saguaro put me on the right course. Thanks. Then I spent some time thinking through this and learning through trial-and-error... Here is what worked for me in the end:

.blog .item .item-image {
height: 12em;
}

.blog .item .item-image img {
max-height: 100%;
max-width: 100%;
}

The idea was to set the container above the image (item-image) to the desired height, than force the image to fully expand or shrink into it. I am not 100% that this is the best way or even that it will work in all my cases, but so far so good.

Good luck.