image display will be stretched vertically

[daydaya]

Sometimes, the image display will be stretched vertically.

This is my image address: https://oss.liamm.top/2024/1704729600.webp

This problem seems to occur randomly. If I copy the URL of the same picture to another page, or clear the cache and open this page again after a while, there is a chance that it will return to normal.

[simone-viozzi]

I've had this problem in the past, with the "reload ui" command it should fix itself. Otherwise, try to clear the browser cache.

[aarontocenter]

@daydaya I fixed these issues by setting up styles to change how the images display. silverbullet applies these "styles" to the image if you change the "tag". I placed these CSS styles in my STYLES.md file. Then I use the image codes wherever, referencing the alt text code. I'm sure other attributes could be used.

Note -- These CSS edits only work when in SYNC mode, if you are in ONLINE mode the CSS comes from a different location that I have yet to fully understand.

![thumbnail](../images/some-image-file.png) will reduce it to looking as a thumbnail and receiving the :hover instance. However to remove the css you must have an "unset" original tag to change it to. I do this by just changing the image link by hand. ![original](../images/some-image-file.png)

Example CSS:

img[alt=original] { width: unset; height: auto;}

img[alt=thumbnail] { width: 120px; height: auto;box-sizing: border-box;
border-radius: 5px;
border: 1px solid grey;}

img[alt=thumbnail]:hover {
z-index: 10;
box-sizing: border-box;
border-radius: 5px;
border: none;
margin-left: 10px; 
position: relative;
box-shadow: #bbbbbb .3 1px 5px;
-ms-transform: scale(3, 3);
    -webkit-transform: scale(3, 3);
    transform: scale(3, 3);
    opacity: 0.95; /*-- Transparency of hovered image --/*
    filter: alpha(opacity = 95);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition-duration: 0.5s;
    }

Good luck. This is just some rough code I collected so that the thumbnail would enlarge, but be slightly transparent so I could see where it had enlarged from.