make images fill 100% width of the screen, closes #1769 #1770
Conversation
Image width is small and not responsive to to fill 100% of available screen width and you can notice that more in landscape mode and on larger screens. The max-width property defines the maximum width of an element and it works if the content is larger than the maximum width . If the content is smaller than the maximum width, the max-width property has no effect.
|
this change "width:100%" also means that i.e. a small 32px icon gets full width icon. Other ideas? |
IMHO that's totally fine since images are used mostly in markdown, not icons. and using |
|
I'm not sure if generally resize to upscale is good. Setting max-width/height is so it not overshoots. But generally if you have a camera picture, its already quite big usually, isnt it? (so it rather is downscaled to fit, then upscaled). Just about behaviour on my device, with 350px as it is now. Fills 3/4 of width roughly in portrait. So about 420px would be filling already. Screen is fullhd. And when I rotate the screen, still I can see the image in full glance without it being chopped of. That is the intention behind this. What I rather would try is a combination of max-width, no fixed width, and a max-vh. Assuming a square 500px img, it would already get width downscaled at portrait. Real small images stay as they are. For landscape, vh can be used to make image fit on screen page, but not sure how likable it is by users - depends on content. |
You are right I can see the image but it's small compared to available screen width like you see in the screenshot below:
I am sorry I didn't get what you meant here completely but if the purpose is just to scale down larger images and leave smaller images as they are why not stop using |
This is what I talked about. Removing 325 and having other means to limit the size to be viewable. |
gsantner
changed the title
Image width is small and not responsive to to fill 100% of available screen width and you can notice that more in landscape mode and on larger screens.
The max-width property defines the maximum width of an image and it works if the image width is larger than the maximum available width . If the image width is smaller than the maximum available width, the max-width property has no effect.
See also #1769