# How to work with images?

**URL:** <https://community.weweb.io/t/how-to-work-with-images/197>\
**Category:** Ask us anything\
**Created:** [January 26, 2022, 9:05am UTC](https://community.weweb.io/t/how-to-work-with-images/197 "2022-01-26T09:05:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yusipower](https://avatars.discourse-cdn.com/v4/letter/y/b5e925/32.png) [@Yusipower](https://community.weweb.io/u/Yusipower)\
**Post date:** [January 26, 2022, 9:05am UTC](https://community.weweb.io/t/how-to-work-with-images/197/1 "2022-01-26T09:05:27Z")

</div>

why can’t I normally set the dimensions of my logo to indicate that it is 1.5 ram high and 100% wide so as not to shrink…??? (via custom css)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [January 26, 2022, 11:27am UTC](https://community.weweb.io/t/how-to-work-with-images/197/2 "2022-01-26T11:27:54Z")

</div>

Can you share the custom css you tried to apply?

---

<div class="post-metadata">

**Author:** ![Yusipower](https://avatars.discourse-cdn.com/v4/letter/y/b5e925/32.png) [@Yusipower](https://community.weweb.io/u/Yusipower)\
**Post date:** [January 26, 2022, 11:46am UTC](https://community.weweb.io/t/how-to-work-with-images/197/3 "2022-01-26T11:46:00Z")

</div>

height: 1rem;  
max-width: 100%;

---

<div class="post-metadata">

**Author:** ![Edward](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/edward/32/249_2.png) [@Edward](https://community.weweb.io/u/Edward)\
**Post date:** [January 26, 2022, 3:06pm UTC](https://community.weweb.io/t/how-to-work-with-images/197/4 "2022-01-26T15:06:42Z")

</div>

Hi,

It is true that you can not currently set rem for height, however you should be able to do that with CSS.

You can already set max width to 100% without CSS. You could use width:auto and max-width:100%. Then just add: height: 1rem as css. Please see my screenshot. Note: 1rem is about 16px;

So if you set the image width as above, the image will spread across the container its in, meaning the container that contains the image will define the width of the image.

 ![screenshot-editor.weweb.io-2022.01.26-15_02_36](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/69f1d9e81c48c8cfd4434041a4f4e7aefb5a5412.png)

---

<div class="post-metadata">

**Author:** ![Yusipower](https://avatars.discourse-cdn.com/v4/letter/y/b5e925/32.png) [@Yusipower](https://community.weweb.io/u/Yusipower)\
**Post date:** [January 26, 2022, 3:53pm UTC](https://community.weweb.io/t/how-to-work-with-images/197/5 "2022-01-26T15:53:49Z")

</div>

Yes, yes, that’s right! I understand what you’re talking about, I did it and I did the same thing as you in the screenshot. I actually want to use the height in my logo, which is svg and inserted through the image element, and the width is not 100% of the container, that is, so that it always scales normally and decreases and is not flattened by other elements…

---

<div class="post-metadata">

**Author:** ![Edward](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/edward/32/249_2.png) [@Edward](https://community.weweb.io/u/Edward)\
**Post date:** [January 26, 2022, 4:56pm UTC](https://community.weweb.io/t/how-to-work-with-images/197/6 "2022-01-26T16:56:14Z")

</div>

I’m not sure if I understand what you mean by flattened. Here is a video with the above settings using an SVG image. Can you share your example?  
 ![screencast-editor.weweb.io-2022.01.26-16_52_16](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/e69adbf5763945058912f0eabbb2ac7e36929f83.gif)

---

<div class="post-metadata">

**Author:** ![Edward](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/edward/32/249_2.png) [@Edward](https://community.weweb.io/u/Edward)\
**Post date:** [January 26, 2022, 5:22pm UTC](https://community.weweb.io/t/how-to-work-with-images/197/7 "2022-01-26T17:22:00Z")

</div>

If you want to use original height of image that scales; you would need to use min height as the original height of the logo and height: auto

Here is an example of a logo with original 60px height that scales up. Width is set to auto:

 ![screenshot-editor.weweb.io-2022.01.26-17_20_01](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/36035a583278a98468a48203639b86221cb41a56.png)

 ![screenshot-editor.weweb.io-2022.01.26-17_21_04](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/db14a38e28e183430ec8a99f4d1f3c3cbdb81447.png)

---

<div class="post-metadata">

**Author:** ![Yusipower](https://avatars.discourse-cdn.com/v4/letter/y/b5e925/32.png) [@Yusipower](https://community.weweb.io/u/Yusipower)\
**Post date:** [January 26, 2022, 6:29pm UTC](https://community.weweb.io/t/how-to-work-with-images/197/8 "2022-01-26T18:29:26Z")

</div>

Thank you, I think it will help me…sorry for my English through translator… another question is can I upload a text file and write my css for global styles in it how can I do this? more precisely, how would it be better through embed or tag head?

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [January 27, 2022, 10:03am UTC](https://community.weweb.io/t/how-to-work-with-images/197/9 "2022-01-27T10:03:33Z")

</div>

Great question! Here’s how you would add a css stylesheet to WeWeb: [Add global css styles to your WeWeb project - YouTube](https://youtu.be/4PZzM2X_5cQ) 🙂
