Resizing image to fit the screen

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:

• Where are you adding the image to the page?
  • In the page itself using Markdown?
  • Or in some template?
  • A plugin that generates a gallery of some sort?
• What does the Markdown/Twig that adds the image look like?
• Can the Twig/Markdown somehow know if the image is portrait or landscape at the time of adding the page?
• Can a property be added to the page header or image meta to indicate landscape/portrait?

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 :

![](myimage.jpg?lightbox) 

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]![](myimage.jpg?lightbox&resize=555)[/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?

@pamtbaau, 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:

• sharing your site
• showing screenshots or animated gifs (tool here) of your issue
• showing relevant css and page layout
• ...

@pamtbaau thx for the capture tool.

Here is my test page with 2 images.

First one is landscape and second one is portrait.

As you can see the behaviour is not like expected.

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
---

![](Capture.JPG?classes=landscape)

![](023.jpg?classes=portrait)

Edit :

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:

![](landscape.jpg?classes=landscape)

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?

• It turns your images in so-called responsive images, which means that for specific window sizes, other images are being loaded. Smaller window, smaller images...
  This is good for the speed of your site.
• It loads the images lazy, which can be useful when using large sets of images in for example galleries or masonry.
• Lazysizes problem: I think lazysizes introduces an issue when enlarging the window: The images do no longer enlarge when enlarging the window.
  This is why your are experiencing weird resizing behaviour.
  • Luckily, people do not resize their window to surf your website. So the issue will not be noticed by visitors.
  • So, while testing, disable lazysizes.
  • Btw. Grav has build in functionality to create responsive images. However, they are not loaded lazily as lazysizes does...

Another issue:

• Your page has a sticky header which grows/shrinks when scrolling.
  The height of the header needs to be subtracted from 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.
  CSSCopy

  max-height: calc(100vh - 44px);  /* when scrolling needed to show images */
  max-height: calc(100vh - 75px);  /* when image is at the top */
  

  Note: its either/or not both... (and the comments are save to copy)

I'm afraid all of this is way out of your comfortzone.... 😇

@pamtbaau, 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:

![](landscape.jpg?classes=maxsize)
![](portrait.jpg?classes=maxsize)

Thx I did this, it's perfect.