Prevent image outputs from being wider than their container. - #7721

Does this work? It seems like a nicer solution than scrollbars if it works, but I don't know our CSS well enough to know if it makes sense.

Does this work? It seems like a nicer solution than scrollbars if it works, but I don't know our CSS well enough to know if it makes sense.

Yes it works. I too think this is a better solution. We can wait and see if someone else wants to weigh in before closing the other PR.

TODO: Test with ctrl-p print.

👍 once you've checked print output

Checked and it works with print output.

This seem to not play nicely with http://jqueryui.com/resizable/ , maybe we could use http://jqueryui.com/resizable/#constrain-area to prevent the weird aspect ratio-thing to happend.

@erccarls and @Carreau see #7718 which was an alternative to this PR. It may be a better fit.

There are two distinct concerns with this

1. It can distort the aspect ratio. I hope this can just be fixed somehow.
2. In some circumstances, people may prefer a wider, scrollable area. I think this depends whether you're deliberately plotting something large, as @erccarls is, or whether you've accidentally created an image larger than the pixel width of the notebook, as was the case in Image overflow in IPython Notebook 3 (beta) #7701. The latter is very easy to do, since the notebook isn't a fixed width, and I think in that case it's far nicer UI to resize the image than to cut it off and show a scrollbar.

Well, shall we revert this merge and try #7718 ?

I think this solution (assuming the aspect ratio thing can be fixed) is greatly preferable if you unintentionally make an image larger than the notebook div (which is easy to do). Cutting off the right hand edge and showing a scrollbar is horrible UI in that case.

Perhaps we can tie this in with the collapse/expand behaviour for when there's lots of output? i.e. initially display the image resized to fit within the notebook, and when you click something, it expands to the image's 100% size in a scrollable div.

That doesn't solve the problem of "I want my figure to be larger than the page area."

Perhaps we can tie this in with the collapse/expand behaviour for when there's lots of output? i.e. initially display the image resized to fit within the notebook, and when you click something, it expands to the image's 100% size in a scrollable div.

That could work, but I think that's not as simple of a solution, which is unfortunate.

I think we've identified two different use cases (deliberately big images vs accidentally big images), so anything which tries to cater to both probably won't be as simple as when we were only thinking about one of them.

We could also revert the patch, and let images be the size they are. It can result in less than pretty output, but at least images are always displayed at the requested size.

Yeah, I've just realised that that is actually what happens in 2.x (screenshots in #7701 made me think that this PR was effectively fixing a regression from 2.x, but I was wrong).

+1 from me to restoring 2.x behavior, then.

#7818 reverts this.

Admittedly, my use case (deliberately large) is rarer than the other. Could you add UI to expand the picture to actual size? Like clicking or double clicking the image? Otherwise, maybe one could make this a notebook config setting.