Re-size images? - Post ID 301725

User 3153395 Photo


Registered User
5 posts

Hello, I have a site with lots of images. To keep it relatively clean, I keep my images at the same height. Is there a way, when resizing pictures, to maintain aspect ratio using the Coffee Cup HTML editor, i.e. when I change the height, the width automatically changes accordingly?
User 122279 Photo


Senior Advisor
14,547 posts

In the width and height settings in the styles panel, you set the dimension for one of the sides (say: width) and leave the other one at 'auto'.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,547 posts

Sorry, I didn't check which app you were using. Now I see it's the HTML Editor.
Give the image a style like this:

<style>
img {width: 60%; max-width: 600px; }
</style>


You can always give a min-width too, if you want. If the height is not mentioned, it will default to auto.

If you have images in different sizes, you could give each size a class name, like e.g. this:

<style>
img.pic60 {width: 60%; max-width: 800px; }
img.pic50 {width: 50%; max-width: 600px;}
</style>


And, of course, You can do similar with the height too.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 3153395 Photo


Registered User
5 posts

Thanks. I did a little google search and stackexchange showed the CSS code using "auto" and so I tried it on html, worked like a charm. Thanks!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.