15

To handle overflow, Super User uses the following CSS for images:

img {
    max-width: 640px;
}

For example, look at the following images with widths of 640px and 800px, respectively:

less than or equal to 640px

greater than 640px

The second image is visually resized (by the browser using interpolation) to fit within the given bounds of 640px.

This looks good, but it can be misleading. For one, it may not be obvious that the image is being visually resized. For all we know, the user uploaded a blurry 640px wide image!

And if the image contains important, small details, copying the image's URL (or dragging the image to a new tab/window) to view it in full resolution, is not the most elegant solution.

So, I propose:

  • When embedding an image from the toolbar, automatically format it to be clickable.

     [![image-alt][#]][#]

greater than 640px

or...

  • Attach a "Click to Enlarge" link to images larger than 640px.

greater than 640px
Click to Enlarge

I am highly in favor of the first suggestion as it is non-intrusive and it would work great on mobile versions of the site, where images are visually resized to be even smaller.

PS:

Should we increase the image max-width to match the post (.post-text) width of 660px?

Nevermind, 640px is good:

less than or equal to 640px

5
  • Please explain how some resizing poses an actual problem. Full screen screenshots might be hard to read, but I don't seethe interpolation issue of 20% or so resizing. Could you please provide a real example?
    – Daniel Beck Mod
    Commented Mar 17, 2012 at 19:18
  • @DanielBeck I suppose on desktop browsers, the benefit would be trivial, even if it does make things a little bit easier. However, I think this is a must for the mobile version of the site.
    – iglvzx
    Commented Mar 19, 2012 at 5:33
  • Is it just 2560x1600 screenshots scaled down to 640 width? In that case, your examples just don't fit well. Please provide real use cases and real examples.
    – Daniel Beck Mod
    Commented Mar 19, 2012 at 5:36
  • +1 I came here to recommend this feature; glad I searched first and found this! Just came across a bunch of threads with full-screen screenshots (one thread had quite a few in fact), and I've been thinking for quite some time now that a default link surrounding the image or a separate "click to enlarge" link would be so nice to have.
    – Karan
    Commented Oct 18, 2012 at 15:05
  • Adding to my previous comment: Quite a few times I've seen people getting irritated at the OP for supposedly posting unintelligible screenshots. I had to tell them how the site visually auto-resized large images and how opening an image by itself (right-click / View Image in FF) would solve the problem. Browsers like IE don't even have a View Image option, so one needs to go to the image's Properties, copy the URL and then open it. All this unnecessary aggravation can be easily avoided with an auto-generated "click to enlarge" link, so what is the problem with implementing this?
    – Karan
    Commented Jul 5, 2013 at 1:06

1 Answer 1

Reset to default
5

.

Here is an example and its source, the other fade and slide can be easily adjusted (no rocket science).

16
  • Are you suggesting that the site use Lightbox? Or that users install a Lightbox userscript?
    – iglvzx
    Commented Mar 17, 2012 at 7:21
  • Why userscript?
    – Tamara Wijsman
    Commented Mar 17, 2012 at 7:28
  • You can mimic Lightbox's functionality with userscripts. Anyway, since you cleverly updated your answer, I think I understand now. :P
    – iglvzx
    Commented Mar 17, 2012 at 7:41
  • 1
    @iglvzx: The nice thing about Lightbox(2) is that you get the image-alt under the image which is very useful.
    – Tamara Wijsman
    Commented Mar 17, 2012 at 7:51
  • Yeah. That would be nice. Currently, the alt text is only visible in the source or if you are a search engine.
    – iglvzx
    Commented Mar 17, 2012 at 7:53
  • 4
    -1, sorry, Lightbox is the worst of all. I just want to see the picture, don't give me a fade-out, a sliding frame, first vertically, then horizontally, then fade-in the image, and then slide down the close button and caption. Can it get more complicated than this? Maybe spin it around once? /cc @iglvzx
    – slhck
    Commented Mar 17, 2012 at 9:38
  • 1
    @slhck: I have got to disagree with you, it could perhaps be that this implementation is bad so check out this one. This one does not fade in the image and the first animation takes as long as the image has to load which is quite fast, the slide down happens while you watch the image so it doesn't interrupt you in any way. Furthermore, the speed can be adjusted.
    – Tamara Wijsman
    Commented Mar 17, 2012 at 9:57
  • Adjusted the answer with the jQuery version, an alternative one could use could be PrettyPhoto.
    – Tamara Wijsman
    Commented Mar 17, 2012 at 10:01
  • 2
    If the whole animation can be removed, I'd be fine with that – also given the fact that fancy animations are nowhere to be found on any SE site. Just take Facebook's photo popup as a better example of how not to annoy people with eye candy.
    – slhck
    Commented Mar 17, 2012 at 10:09
  • Adjusted my answer again with an example I shared with you on chat.
    – Tamara Wijsman
    Commented Mar 17, 2012 at 10:15
  • Note how we don't have thumbnail images. The image is always already loaded. No need for any animation to mask that.
    – Daniel Beck Mod
    Commented Mar 17, 2012 at 18:08
  • @DanielBeck: Indeed, stripped that out in the example. There's only a fade and slide left, but that's just a matter of changing a few characters in the source.
    – Tamara Wijsman
    Commented Mar 17, 2012 at 18:14
  • instead of heavy (yes heavy) lighbox plugin try shadowbox - its about 10k jquery photo popup plugin :)
    – integratorIT
    Commented Mar 19, 2012 at 17:08
  • @Pinger: Lightbox is not heavy, only 6 KB; yours takes more space with and without adapters...
    – Tamara Wijsman
    Commented Mar 19, 2012 at 19:23
  • Well the image and links are not accessible on my computer (clicking the image leads to a forever loading symbol; the links lead to an empty page that never finishes loading). So I'd have to say that this idea isn't ready for prime time.
    – fixer1234
    Commented Jul 7, 2015 at 11:46

You must log in to answer this question.

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