3

I just noticed, while writing an answer, that if I put a larger image inside a blockquote it overflows.

Here is an example:

SS

That happens because the blockquote has padding:10px.

5
  • This is a known bug. I don't know if there's anything on MSO that's a duplicate, but there's definitely something on MSE that addresses this.
    – Laurel
    Commented May 18, 2016 at 16:39
  • Is there a reason you need an image that large in an answer? Seems like you should narrow the answer down to what's needed and include a link to the image or the page where the image resides. Commented May 18, 2016 at 16:46
  • @MikeMcCaughan was a Screenshot, plain and simple, I linked the page of course and quoted part of it. including the image
    – dippas
    Commented May 18, 2016 at 16:49
  • This seems like a bug for something that shouldn't happen in the first place, in my opinion. The answer should be able to stand without the image, or with a cropped/smaller version of the image if absolutely necessary, with a link to the full size image, or to the original page, as in this case. Commented May 18, 2016 at 17:05
  • meta.stackexchange.com/questions/143973/… Commented May 18, 2016 at 17:49

2 Answers 2

3

Images now have a max-width of 100% so they cannot expand outside of whatever nested element contains them.

1
  • Good to know that ;) Apparently reminding this issue ( I didn't know was mentioned 3 years ago in MSE) helped to fix it ;)
    – dippas
    Commented May 19, 2016 at 17:33
2

A possible solution would be reduce the max-width:660px but just inside the blockquote, something like:

.someclass blockquote img {
 max-width:635px /* or other value */
}

Alternatively we can add some letters in front of URL,

Original url: https://i.sstatic.net/Yj6Zh.png

Modified url https://i.sstatic.net/Yj6Zhm.png

Example with m


SS

Full table:

s: small   square     90×90   (forced)
b: big     square     160×160 (forced)
t: small   thumbnail  160×160
m: medium  thumbnail  320×320
l: large   thumbnail  640×640
h: huge    thumbnail  1024×1024
2
  • 1
    This doesn't fix nested lists and blockquotes though.
    – animuson StaffMod
    Commented May 18, 2016 at 16:55
  • @animuson, you are right, max-width:100% would be the best solution, but I did mention /*or other value */
    – dippas
    Commented May 18, 2016 at 17:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .