# Responsive images, height & width

**URL:** <https://forum.getkirby.com/t/responsive-images-height-width/28975>\
**Category:** Questions\
**Tags:** v3\
**Created:** [July 4, 2023, 8:38am UTC](https://forum.getkirby.com/t/responsive-images-height-width/28975 "2023-07-04T08:38:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Milos2504](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@Milos2504](https://forum.getkirby.com/u/Milos2504)\
**Post date:** [July 4, 2023, 8:38am UTC](https://forum.getkirby.com/t/responsive-images-height-width/28975/1 "2023-07-04T08:38:15Z")

</div>

Hi all

I’m trying to create responsive images based on the Responsive images cookbook recipe.

I can get the images to display in different sizes based on the viewport however I can’t get the image height & width displayed from those thumb images. I am still trying to get my head around this so I may be doing it wrong, but I want to prefill width and height based on the image size.

Below is my code,

config

```auto
        'srcsets' => [
            'default' => [
                '300w' => ['width' => 300, 'height' => 169, 'crop' => 'center', 'format' => 'webp'],
                '600w' => ['width' => 600, 'height' => 338, 'crop' => 'center', 'format' => 'webp'],
                '900w' => ['width' => 900, 'height' => 506, 'crop' => 'center', 'format' => 'webp'],
                '1200w' => ['width' => 1200, 'height' => 675, 'crop' => 'center', 'format' => 'webp'],
                '1800w' => ['width' => 1800, 'height' => 1013, 'crop' => 'center', 'format' => 'webp']
            ],
            '4x3webp' => [
                '300w' => ['width' => 300, 'height' => 225, 'crop' => 'center', 'format' => 'webp'],
                '600w' => ['width' => 600, 'height' => 450, 'crop' => 'center', 'format' => 'webp'],
                '900w' => ['width' => 900, 'height' => 675, 'crop' => 'center', 'format' => 'webp'],
                '1200w' => ['width' => 1200, 'height' => 900, 'crop' => 'center', 'format' => 'webp'],
                '1800w' => ['width' => 1800, 'height' => 1350, 'crop' => 'center', 'format' => 'webp']
            ],
            // more srcsets as needed
        ]
    ]

```

template

```auto
<?php
$sizes = "(min-width: 1200px) 30vw,
        (min-width: 900px) 50vw,
        (min-width: 600px) 50vw,
        100vw";

if ($image = $product->cover()->toFile()):?>
    <picture>
        <source
            srcset="<?= $image->srcset('16x9webp') ?>"
            sizes="<?= $sizes ?>"
            type="image/webp"
        >
        <img
            alt="Window <?= $product->title() ?> Canberra"
            src="<?= $image->resize(300)->url() ?> ?>"
            srcset="<?= $image->srcset() ?>"
            sizes="<?= $sizes ?>"

            loading="lazy"
        >
    </picture>
<?php endif ?>

```

As you can see there is a gap between sizes and loading within the template code, it’s missing the image width and height. If I add the width and height elements as per the recipe, then my image is always displayed in 1800 width.

```auto
        height="<?= $image->resize(1800)->height() ?>"

```

What am I doing wrong, or what am I not understanding?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [July 4, 2023, 11:28am UTC](https://forum.getkirby.com/t/responsive-images-height-width/28975/2 "2023-07-04T11:28:30Z")

</div>

You have to take care how the images are displayed in your CSS, i.e. limit the size to the width of the container etc.

---

<div class="post-metadata">

**Author:** ![Milos2504](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@Milos2504](https://forum.getkirby.com/u/Milos2504)\
**Post date:** [July 4, 2023, 11:35am UTC](https://forum.getkirby.com/t/responsive-images-height-width/28975/3 "2023-07-04T11:35:54Z")

</div>

I’ve set that to 100%, I don’t seem to have a problem with that. It’s more to do with the height, the images would fit the div at 100%, but then the height would be the original height of the image, if I specify the image height in html.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [July 4, 2023, 11:43am UTC](https://forum.getkirby.com/t/responsive-images-height-width/28975/4 "2023-07-04T11:43:52Z")

</div>

> [@Milos2504](#):
>
> It’s more to do with the height, the images would fit the div at 100%

Is the height set in CSS is well?

 ![Screenshot 2023-07-04 at 13.44.26](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/a/a37cd9ed084fb4c6ecef3a5b9d26eb4be72546a5.jpeg)

---

<div class="post-metadata">

**Author:** ![Milos2504](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@Milos2504](https://forum.getkirby.com/u/Milos2504)\
**Post date:** [July 4, 2023, 11:54am UTC](https://forum.getkirby.com/t/responsive-images-height-width/28975/5 "2023-07-04T11:54:08Z")

</div>

That worked for actually sorting out the display of the image.

For the html side of image width and height, what is the best practice. The cookbook recipe refers to the highest size. Is it meant to be the preferred display size?

```auto
width="<?= $image->resize(1800)->width() ?>"
height="<?= $image->resize(1800)->height() ?>"

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [July 4, 2023, 12:03pm UTC](https://forum.getkirby.com/t/responsive-images-height-width/28975/6 "2023-07-04T12:03:21Z")

</div>

> [@Milos2504](#):
>
> Is it meant to be the preferred display size?

I think it doesn’t really matter that much. The purpose of adding width and height is to prevent CLS by providing the correct aspect ratio: [Optimize Cumulative Layout Shift &nbsp;|&nbsp; Articles &nbsp;|&nbsp; web.dev](https://web.dev/optimize-cls/)

---

<div class="post-metadata">

**Author:** ![Milos2504](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@Milos2504](https://forum.getkirby.com/u/Milos2504)\
**Post date:** [July 4, 2023, 12:10pm UTC](https://forum.getkirby.com/t/responsive-images-height-width/28975/7 "2023-07-04T12:10:34Z")

</div>

Okay thank you