55 lines
2.2 KiB
SCSS
55 lines
2.2 KiB
SCSS
|
/* Constrain size of casually posted images.
|
||
|
|
1: Don't trash the layout sideways.
|
||
|
|
2: Limit height to fit inside the viewport. (UNLESS the aspect ratio is
|
||
|
|
greater than 1:2, in which case it's probably a tall comic.)
|
||
|
|
3: Defend the native aspect ratio.
|
||
|
|
4: Respect the width/height HTML attributes as the maximum size (in CSS
|
||
|
|
pixels) for the "zoomed in" state, since the image might be huge to
|
||
|
|
support high DPI devices.
|
||
|
|
5: Let the user expand an individual image to max size by clicking (UNLESS
|
||
|
|
it's inside a link). (js/jquery.imageshrink.js)
|
||
|
|
6: Use a zoom-in/zoom-out cursor to show when users can zoom.
|
||
|
|
7: Omit zoom cursor for images that are actual size in their unexpanded
|
||
|
|
state (.imageshrink-actualsize; relies on JS for comparing extrinsic and
|
||
|
|
intrinsic sizes).
|
||
|
|
8: Ignore all of the above for:
|
||
|
|
a: Images inside tables or inline-styled divs. (.imageshrink-exempt;
|
||
|
|
relies on JS for heavy lifting.)
|
||
|
|
b: Images with a style attribute.
|
||
|
|
*/
|
||
|
|
|
||
|
|
@supports (object-fit: contain) {
|
||
|
|
.entry-content, .comment-content, .InboxItem_Content .Body {
|
||
|
|
img:not(.imageshrink-exempt):not([style]) {
|
||
|
|
// A height or width value can be overridden, but it can never be truly
|
||
|
|
// *removed,* which means you lose the ability to default to the
|
||
|
|
// height/width HTML attributes as soon as you touch those CSS properties.
|
||
|
|
// That's why we're using this :not() selector -- once
|
||
|
|
// .imageshrink-expanded gets added to an image, it retroactively never
|
||
|
|
// had that "height: auto;" property, and thus the zoomed-in state can
|
||
|
|
// respect the height/width attributes.
|
||
|
|
&:not(.imageshrink-expanded) {
|
||
|
|
cursor: zoom-in;
|
||
|
|
height: auto; // If the image shrank, this prevents gross empty space above/below it.
|
||
|
|
max-width: 100%;
|
||
|
|
max-height: 95vh;
|
||
|
|
object-fit: contain;
|
||
|
|
object-position: left;
|
||
|
|
|
||
|
|
// Tall comics don't need to fit inside the viewport.
|
||
|
|
&.imageshrink-tall {
|
||
|
|
max-height: unset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.imageshrink-expanded {
|
||
|
|
cursor: zoom-out;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
a img, .poll-response img, img.imageshrink-actualsize {
|
||
|
|
cursor: unset !important;
|
||
|
|
}
|
||
|
|
}
|