Image cut when decreasing page width

Question

I am developing a web application in jsp and Servlet and put an image in a bootstrap column <div class="col-11"></div> so I put the image in the center of the screen using themargin-left .But by decreasing the page width the image cuts

Image in normal page width

Image cut with page width decreased

  <div class="row">

   <div class="col-11"><img src="imagens/imagem1.JPG"class="imagem_principal" id="desconto" alt="desconto"></div>

    </div>
   #desconto{
width: 90%;
height: 60px;
margin-top: 30px;
margin-left: 70px;

  }

Answer 1

This happens because the class col-11 apply the width through a percentage (relative measure) and you applied the margin in pixels (absolute measure).

To correctly center the image in the center of the screen, you first need to center the col-11 using justify-content-center in row. After that, it is necessary to center the image in the div using text-center.

<div class='row justify-content-center'>
    <div class='col-11 text-center'>
        <img src="imagens/imagem1.JPG"class="imagem_principal" id="desconto" alt="desconto">
    </div>
</div>