silverbullet
silverbullet copied to clipboard
image display will be stretched vertically
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.
I've had this problem in the past, with the "reload ui" command it should fix itself. Otherwise, try to clear the browser cache.
@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.