Hi,
Grav sets the sizes argument to full viewport width by default. That makes my portrait images way to big to see it properly.
I don’t want to simply resize it, I want the image to be the bigger possible on the screen. Is it possible to do it ?
(because if i change the size argument to be the height, i will have the same opposite problem on smartphone screen).
Tank you
Removing all width and height properties and adding this class to the image should do the trick:
.full-width {
width: 100vw !important;
position: relative !important;
margin-left: -50vw !important;
margin-top: 10px !important;
left: 50% !important;
}Thank you for the answer.
Sorry for the noob question but where do i put this code? I tried to find in wich file but i am lost on this.
@oxide, Some questions to better understand your situation:
I am using an inherited theme of Quark. (my problem doesn’t concern the lightbox)
I add the images in the page using markdown and Featherlight plugin like this :
If it’s a portrait image, the width is fitting to the screen so i can’t see the top and botom in the same time. To counter it, I do this (with Shortcode Core plugin) :
[center][/center]
As you can see it is very basic stuff, i was wondering if a more beautiful solution was existing but I am afraid not to have enough skill to do it (I didnt understand properly the first answer).
the solution that hschneider proposed is css code - you should add that to your theme’s custom.css file in the css folder.
then you can assign the class full-width to the image.
but, unfortunately, that can be a problem, because of the limitations of markdown.
in this case (image added in the markdown of your page) you might better be off using pure html, like so
<img class="full-width" src="https://www.example.org/image.png">
Thanks for the explanations.
So I edited the mytheme/css/custom.css file to add hschneider code (there is only that code in the file) :
.full-width {
width: 100vw !important;
position: relative !important;
margin-left: -50vw !important;
margin-top: 10px !important;
left: 50% !important;
}
After that I created a new page and add two times the same image with hoernerfranz HTML code :
<img src="/user/pages/04.test/023.jpg">
<img class="full-width" src="/user/pages/04.test/023.jpg">
But the two images are the same, the full-width class one is not fitting the screen. Did I miss something?
@oxide, Using an inherited theme of Quark, I did the following.
[Updated to cleanup code samples.]
Created portrait version of image
Copied both images into /pages/02.typography/
Added images to default.md
(Note the classes=maxsize)
Added some css to /themes/mytheme/css/custom.css:
.maxsize {
max-height: 100vh; /* subtract height of fixed header if needed */
display: block;
margin: auto;
}
Landscape image in action:
Portrait image in action:
Notes:
max-height: calc(100vh - 2rem); /* 2rem is example */
Hope this helps…
@anon76427325, Thanks it’s perfectly clear. I did exactly what you told, and it’s not working for me. The portrait image is still fitting the width, and images keep there smaller size when I play with the windows edges.
I did copy/paste your css code in the top of the custom.css file, and the markdown code is good in default.md .
So I don’t understand where is the problem. Is there an other file involved in that operation wich could be corrupted?
@oxide, Without knowing/seeing your site, the page layout and styling, “it’s not working for me” is a bit uninformative to me…
You might consider adding some clarity by:
@anon76427325 thx for the capture tool.
Here is my test page with 2 images.
First one is landscape and second one is portrait.
My custom.css file looks like this :
.portrait {
max-height: 100vh; // max-height === height of device
display: block; // Only block elements can center using 'margin:auto'
margin: auto; // Center image
}
.landscape {
max-height: 100vh;
display: block;
margin: auto;
}
And my défault.md file is :
---
title: test
media_order: '023.jpg,Capture.JPG'
cache_enable: false
---
I don’t know why but it’s working now
But it remains small
@oxide, OK, you can partly blame me…
LOL… You included the comments from my example, which is invalid css. Remove the // and the remarks
I will fix my example code…
And you can blame yourself…
You are using plugin lazysizes which automagically replaces the original <img> definition into an <img> using a srcset. When using the following inside your markdown:
which normally generates:
<img alt="" class="portrait" src="/user/pages/02.typography/portrait.jpg">
but lazysizes generates (using default settings):
<img alt="" class="portrait lazyautosizes lazyloaded"
data-srcset="/images/5/3/d/4/f/53d4f267887a440cf8cc6c69aa8fe01099653869-portrait400w.jpeg 400w,
/user/pages/02.typography/portrait.jpg 719w"
data-src="/user/pages/02.typography/portrait.jpg"
data-sizes="auto" sizes="976px"
srcset="/images/5/3/d/4/f/53d4f267887a440cf8cc6c69aa8fe01099653869-portrait400w.jpeg 400w,
/user/pages/02.typography/portrait.jpg 719w"
src="/user/pages/02.typography/portrait.jpg">
What’s the effect of lazysizes?
Another issue:
100vh. If your images are at the very top of the page, you need to subtract 75px. When your images are lower in the pages, you need to subtract 44px.max-height: calc(100vh - 44px); /* when scrolling needed to show images */
max-height: calc(100vh - 75px); /* when image is at the top */
I’m afraid all of this is way out of your comfortzone… 
@anon76427325, well done it’s working now !
To defend myself, the first time I put your code, I removed the // and remarks, but it was not working so I put it again…
I installed lazysize to make some test and thought I disabled it… I understand all my mistakes. And you’re right, I’m starting from scratch about website and coding.
Thanks a lot for your comments, and for taking the time to explain it to me ! 
@oxide, Ouch, I forgot to cleanup the css since both selectors are the same. Replace all css with:
.maxsize {
max-height: 100vh; /* subtract height of fixed header if needed */
display: block;
margin: auto;
}
And use maxsize in markdown:
Thx I did this, it’s perfect.