Image is cut by decreasing page width

Navigation
0

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

Image in the normal width of the page

Imagecutwithpagewidthdecreased

<divclass="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;

  }
    
asked by anonymous 07.10.2017 / 00:56

1 answer

2

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

To properly center the image in the center of the screen, you first need to center col-11 using justify-content-center on 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>
    
07.10.2017 / 02:18
Save array to different columns with fputcsv Hibernate is not mapping classes