How to make an image's size responsive?

Design help General
1

I have here two CMS images inside a slide, but struggle to make it response to the screen size (eg. from screen size 1920 px to 1366 px), preferably retaining the image’s 16:9 ratio.

Ideal effect as below:
https://cl.ly/b60611a9555c

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Here is the section I would like to make responsive:
https://cl.ly/798cbf61f03d

3

Your first reference is video background (Not image).

16:9

In general width: 100% and height:auto make the image responsive (Fill up the width and maintain aspect ratio). If you upload 16:9 images this will work fine.

If you upload 4:3 or 1:1 and so on - and you want to “force” 16:9 + keep aspect ratio - you should use one line of custom css code - guide her:

Anyway, Add live-URL + read-only (Hard to know what is the problem by video).

1 Like