Re-size images? - Post ID 301723
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?
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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
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:
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:
And, of course, You can do similar with the height too.
Give the image a style like this:
<style>
img {width: 60%; max-width: 600px; }
</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>
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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
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.