Image at auto width stops growing at native resolution

[ErgoArchitecture]

Hi,

I thought we had this figured out but it keeps coming back to haunt us. We want images to grow to fill a column regardless of their native resolution. I tried setting the class max-width to 500% but that did nothing. Seems like it should be easy, but I am stumped.

Here is a link to our prototype project page. The top image in the left-hand column behaves badly at wider single-column screen widths (it stops growing at native resolution) while the image below behaves as we want (only because we boosted the resolution to wider than necessary.) How can we fix this without boosting resolution?

Thanks!

[paul.r]

Hi,

To make your image full width(column width), set your max-width to 100% then add this in your Image element’s CSS

$el img {
   width:100% !important;  
}

Hope this helps

[ErgoArchitecture]

Hi Paul,

Thanks for your reply. I had tried that, and unfortunately it doesn’t work. The image still stops growing at 100% of its native resolution. Any other ideas? It seems like this should be a common thing to do…

[friech]

Hi Ergo,

Add this to the Page > CSS

.x-image,
.x-image img {
	width: 100% !important;
	max-height: none !important;
}

And it will make your images take the entire width of its container (Columns). This is not recommended though as you already know this will stretch your image and look blurry.

Hope it helps,
Cheers!

[ErgoArchitecture]

That did it! Thanks so much!

[jade]

You’re most welcome!

[ErgoArchitecture]

One follow-up question: Is there any reason I shouldn’t put that code in the global CSS? (Theme Options> CSS). As far as I know I will always want that behavior from images.

[paul.r]

Hi,

We are trying to isolate it so it will not affet other images.

But If you want it to take effect in your entire site then you can add that code in Theme Options > CSS

Thanks