0

I'm trying to tell an image to be displayed with a maximum height of 400 pixels, and a width adapted onto the used height, with the following CSS - Code:

span.itemImage img {
    max-height:400px;
    width:auto;
}

With the code above, images don't exceed the height of 400 px; that works perfectly, but their width doesn't get adapted in function of the height they have. Anyone knows how to program that properly in CSS ?

Illustration of the image in full size and normal mode:

enter image description here

Now when I insert the CSS-code above with the max-height set to let's say 50px (took such a small value to clearly visualize the issue), the result is :

enter image description here

So you can clearly see that the width of the image stayed the same, instead of being adapted in function of the height (which is in this case 50 px). Any help? I don't want any cropping to occur, just that the width of the image is set in function of the height the image has.

  • Please include my information (e.g. html markup) and perhaps a screenshot that reveals the incorrect resizing. Are you requiring that the aspect ratio should change to allow the image to fit? Or do you want cropping to occur? Your question is not yet complete/clear. – mickmackusa Aug 7 at 12:18
  • 1
    Have you tried not specifying a width at all? Max-height on the image should keep it from getting too big, and I think the universal browser default is to maintain aspect ratio on bitmapped images. – Arlen Aug 7 at 14:20
  • Not working bruh.. – Joe Aug 7 at 14:28
  • Adding the images improved your question clarity. Finally, please let us see your html markup and all of the current style setting that are currently declared. Only after seeing the html and the css will we possibly be able to advise on a technique that doesn't employ !important. (I concur with Arlen's comment.) – mickmackusa Aug 7 at 22:36
  • Well I don't know where in the Joomla Server I can find the corresponding html - file and style settings (or do you just mean the complete css - file by style - settings?) ? – Joe Aug 8 at 7:01
0

It's maybe not the best solution, but with this little CSS-modification it works. Proper CSS-Code:

span.itemImage img {
    max-height:400px;
    width:auto!important;
}
  • OK, I think that tells me what was happening -- a conflict with another rule in your CSS. The Web Inspector of your browser can point you to the CSS that was overriding your original setting, and that would have been the key to fixing it. Under normal circumstances, not specifying a width would have worked (the default is auto) so something else was overriding that, and without being able to see the rest of the CSS (even a link to the page with the flattened image would have been enough) no one here could help. Pro tip: every '!important' in the CSS adds complexity to future changes.. – Arlen Aug 8 at 14:57
  • The problem is that I can't provide any URLs or whatever at the moment (not my order), sorry for that.. I'd share anything here if I would have been allowed to do so, believe me. How can you install that web inspector thing ? Sounds to be the solution.. – Joe Aug 9 at 9:43
  • It's built into the browser, though Chrome-derived browsers tend to call it DevTools. Depending on your platform, point to an element on the page and right click, a small menu should appear with a phrase like "Inspect Element" in it. Choose that. – Arlen Aug 12 at 18:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.