somehow my image is not scaling down or up at all. I have seen many things on the internet but I could not solve it. W3schools told me to make it like this, with the formular-banner image.

.formular-banner
{

    max-width: 100%;
    height: auto;
}

<div >
                        <img src="koala.jpeg">
                    </div>

CodePudding user response：

First of all, you are defining settings for the parent element of the image, not for the image itself. So you can't expect that to have an effect on the image...

For the image itself, you also shouldn't use those settings, but instead of max-width: 100% (to make it the full width of the container), you should use width: 100%, plus a max-width that has the original width of the image in pixels, in order not to make it any bigger (i.e. distorted) than the original image in case it's smaller (i.e. less wide) than the container.

So your CSS rule would be

.formular-banner > img {
    width: 100%;
    max-width: 1240px; /* use the actual width of your image here */
    height: auto;
}

If the image is smaller than the container (which, as a div = block element) will have 100% width by default) and you want it to be centered, you can add this rule (for the container) which will horizontally center the image (as an inline element) inside the container:

.formular-banner {
   text-align: center;
}

CodePudding user response：

The max-width:100% and height:auto is not for scaling down.

height:auto let the element height will depend upon the height of its children.

max-width:100% make sure the element maximum could use 100% of its parent container and won't bigger than parents element.

You probably looking for transform: scale()

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

.formular-banner {
  transform: scale(0.7)
}

<div >
  <img src="koala.jpeg">
</div>

Check more here