Misaligned image when page width decreases

Question

This is the resolution of my image in normal page width

But by decreasing the page width the image looks like this.

I would like the image to be the same size as the 1 small image

HTML

 <div class="col-6 col-md-4">
            <img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal">
        </div>

CSS

#imagem_principal{
            width: 92%;
            height: 240px;
        }

Answer 1

Apparently your CSS is not being applied to the image. In the html you passed is being used a ID #imagem_principal and the CSS is in a CLASS .imagem_principal.

How you are using bootstrap You can add a class ="img-responsive" that maybe works or if you prefer, exchange your html for class="imagem_principal" and its css

.imagem_principal{
height: auto;
max-width: 100%;
}

Another problem that happens is that when your screen gets smaller, your html (bootstrap) is getting full page width, the standard Xs-12. To do this add a -Xs tag to control the width of the screen at smaller resolutions, this will prevent the layout from breaking into multiple lines and your image occupying 100% of the screen..

<div class="col-6 col-md-4 col-xs-4">