mirror of
https://github.com/discourse/discourse.git
synced 2024-12-12 04:53:51 +08:00
FIX: Show quoted images correctly. (#8391)
This commit attempts to fix two issues that affect quoted images. The first issue is observed while loading. The 'position: absolute' CSS property makes 'width' and 'height' behave differently. Instead of using the known image size, this makes it use the computed width and height of the image, which should be the right size, as shown to the user. The second issue is caused by 'object-fit: cover' property which trimmed the left and right sides of wide pictures to make them fit inside the quote.
This commit is contained in:
parent
a992caf741
commit
d5f5d9b867
|
@ -56,10 +56,16 @@ function show(image) {
|
|||
copyImg.className = imageData.className;
|
||||
|
||||
let inOnebox = false;
|
||||
let inQuote = false;
|
||||
for (let element = image; element; element = element.parentElement) {
|
||||
if (element.tagName === "ARTICLE") {
|
||||
break;
|
||||
}
|
||||
if (element.classList.contains("onebox")) {
|
||||
inOnebox = true;
|
||||
break;
|
||||
}
|
||||
if (element.tagName === "BLOCKQUOTE") {
|
||||
inQuote = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -68,6 +74,18 @@ function show(image) {
|
|||
copyImg.style.height = `${imageData.height}px`;
|
||||
}
|
||||
|
||||
if (inQuote && imageData.width && imageData.height) {
|
||||
const computedStyle = window.getComputedStyle(image);
|
||||
const width = parseInt(computedStyle.width, 10);
|
||||
const height = width * (imageData.height / imageData.width);
|
||||
|
||||
image.width = width;
|
||||
image.height = height;
|
||||
|
||||
copyImg.style.width = `${width}px`;
|
||||
copyImg.style.height = `${height}px`;
|
||||
}
|
||||
|
||||
image.parentNode.insertBefore(copyImg, image);
|
||||
} else {
|
||||
image.classList.remove("d-lazyload-hidden");
|
||||
|
|
|
@ -233,8 +233,6 @@ blockquote {
|
|||
// !important here otherwise it won't work.
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user