Gif width and height is adjust to browser size over original width.

[quroom]

As you can check this image, 600px width / 900px height are original gif size. But in notion page, it is automatically fit to browser size.. How can I display gif image as original size?

I was trying to applys style to notion image. But parent div has padding-bottom so I don't know how I can control layout.

This problem makes to read text more difficult. Because of gif image is too big..

[janniks]

Hi 👋 Thanks for using vue-notion

Could you provide a notion page id, so I can reproduce the behavior?

[quroom]

https://dev.onepaper.biz/manuals/dbaa153f7aec4892b41afe332609a6ff

But you need to register first, sorry for that.

[quroom]

Is there any specific reason that you are using absolute and width / height 100% for image? It makes image big as much as block size. I think it's better to makes notion-image-inset styled with "position:relative" and Remove padding-bottom Does it make sense?

[janniks]

We use pretty much the same CSS as react-notion (only slightly modified).

You are free to add CSS (aka override) in a project that uses vue-notion.

I'll look into this and see if it makes sense to change for all vue-notion users.

[quroom]

@janniks look this code https://codesandbox.io/s/vue-notion-component-example-forked-1990z?file=/pages/index.vue

When you make window as big as like 2560*1440 This asset makes us difficult to check text. In real notion page, the image and asset are not adjust to browser size. I leave additional images.

This is result vue-notion renders

This is notion result.

[janniks]

I think, I understand what's happening here.

NotionRenderer is designed to render HTML like any other element (e.g. a <button> or <p>) it does not make assumption on where it's going to be used.

The exception is the fullPage option (it's designed to make pages look similar to Notion):

• If fullPage is set (aka true), then NotionRenderer will add the page title AND surrounding space.
• If fullPage is NOT set (aka false), then NotionRenderer will not add the page title OR surrounding space.

---

So users need to either add spacing (max-width, margin/padding, columns, etc.) in custom CSS, OR use fullPage

---

I also noticed that vue-notion was adding notion-full-width to your page. This should only happen when the Notion page is set to "Full Width" in Notion itself. If "Full Width" is On, the NotionRenderer will also NOT add surrounding space (even when fullPage is set).

---

Hope that helps ☺️

[janniks]

Here's the codesandbox with fullPage added: link you should still check if "Full Width" is enabled in Notion.

Let me know if this works 👍