Image Block "Max-Height/Max-Width" Issue

Permalink 1 user found helpful
What would cause the image block's max-height and max-width properties not work and be overridden? I'm looked through the style sheet, etc, and am not able to set the image block's max sizes through it's properties, and it continues to stay the size of the image.

Deladroid
View Replies:
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi Deladroid,

Do you have a link to the page where this is happening?
Deladroid replied on at Permalink Reply
Deladroid
It's not live/public yet, but here is an example page with the issue:
http://www.pnwu.net/index.php?cID=180...
justinforbez replied on at Permalink Reply
I think I am having the same issue:
http://knoxdiscgolf.org/tournaments/events-schedule/old-city-open1/...

Here is another page that is working correctly:
http://knoxdiscgolf.org/tournaments/events-schedule/tommy-schumpert...

I am using the image block the same way on both pages with limiting width by 500 and height by 750. The first page does not seem to set the options correctly.

Concrete5 version 5.6.3.3
MrKDilkington replied on at Permalink Reply
MrKDilkington
@justinforbez

The image you are using is being sized based on its height and width (1700 x 2200 pixels). This is causing it to break out of the layout. It is too big for its containing element.

To make your image fill the available space in the layout. Add this to your CSS:
.ccm-image-block {
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

The image is almost 1MB. To improve performance, it can be compressed down under 400KB without loss of quality.
justinforbez replied on at Permalink Reply 1 Attachment
Agreed that I can edit my CSS but what I am not understanding is why image block did that for me and now I am having to manually edit the css.

Thanks for the tip on the image. I will resize.

This gui interface no longer works:
attached screenshot

settings are the same on both pages
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Deladroid

I am not quite sure what you are referring to. The images in the sample page can be overridden.

img {
max-width: 100%;
height: auto;
}

@media screen and (max-width: 800px)
img, img[class*="align"], img[class*="wp-image-"] {
max-width: 100%;
height: auto;
}

What were you trying to do?
Deladroid replied on at Permalink Reply 1 Attachment
Deladroid
I'm trying to set the max-width and max-height within the block's settings, where you choose the image, and below there are those also. It doesn't matter what I put in there. I attached a screen shot.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Deladroid

I am not sure why that would happen.
justinforbez replied on at Permalink Reply
@Deladroid

Yes that is the exact issue that I am having. Now just find a fix. What version of C5 are you on?

I am trying to trace this down through the code but am not sure which css I should be looking at. I am assuming on one of the main c5 ccs sheets.
justinforbez replied on at Permalink Reply
the class in question is ccm-image-block still not sure what css it is located on.
Deladroid replied on at Permalink Reply
Deladroid
I wouldn't think we'd have to do anything with the c5 styling, but I could imagine maybe jquery styling could be overriding it. Something is overriding it, and it's hard to find, for sure.
Deladroid replied on at Permalink Reply
Deladroid
I'm on 5.6.3.3
justinforbez replied on at Permalink Reply
my quick fix is going to be to manually edit the pic to the pixel width i want and then upload but this was all working in 5.6.3.2. I don't feel comfortable downgrading so I am kind of stuck until I can figure out where that class is called and why it is not working the same in the lastest version.
lota replied on at Permalink Reply
lota
After upgrade from 5.6.3.2 to 5.6.3.3 seems Concrete5 not generate a copy of scaled images using Max Width attribute. Is not a CSS issue. Page link the original image loaded in file manager, that could be very large.

I hope core team fix the problem soon ;-)

HTH
Alessandro