Make image shrink as soon as screen gets smaller, before the side of the screen touches the image

Question

I'm trying to achieve something but i don't know the right way to do this. Hopefully someone can help me in the right direction.

With responsive images the image will get smaller as soon as the screen is as big as the image and then the image will get smaller together with the screen (if I'm right). But i am trying to make an image get smaller as soon as the screen gets smaller. This is the page https://videosafari.nl/banner-test/ and it's about the red logo (NPO1).

The actual problem is that the images underneath the logo get smaller when the screen gets smaller but the logo stays the same size. I want the logo to stay in proportion with the images underneath it so i would like it to get smaller to. Any suggestions?

    .carousellogo {
    display: inline-block;
    margin: 0px 0px 12px 30px;}

    <div class="carousellogo"><img src="https://videosafari.nl/wp-content/uploads/800px-NPO_1_logo_2014.svg_.png" alt="" width="75" height="" class="alignleft size-full wp-image-23274" /></div>

The original image is width="149" height="100" but i made it smaller to make sure the image stays sharp at retina screens. width="75" height="".

I hope I was clear enough and thank you for taking the time to read my question. BTW i am just a beginner with css and html.

Have a nice day and stay safe.

Answer 1

you can use width: calc(4vw + 30px); on .carousellogo to control the width of the element to 4% of the viewport and add another 30px to it. I tested the code calc(4vw + 30px) looks perfect for your site on both desktop and mobile. Hope it helps.