Srcset get different image aspect on small hires screens like smartphones

Question

I want to display a banner on a website. On 4k screens it should be larger on smartphones smaller but higher like 780x550px

I use a image with with a srcset like this

<img src="image.jpg" 
srcset="image-2560x400px.jpg 2560w,
image-1920x450px.jpg 1920w,
image-1024x500px.jpg 1024w,
image-780x550px 780w" 
alt="*" />

Unfortunately most of the Smartphones have a very resolution so they use also on a vertical screen the 1920x450 pixel banner.

I tried to use the size attribute and the DPI aspect options like 1x 2x 3x also. But I don't want retina Displays and other screens with a high resolution and horizontal orientation to display the small but high image.

Maybe I did not completely understood the srcset and size options.

Answer 1

You need to use media queries, they let you add different classes based on the size of the screen and not the resolution: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Then in there you can specify the resolution you want and the size of the image.