Image misaligned by decreasing page width

Question

Image misaligned by decreasing page width

Navigation

#1 by (1 votes)

0

So is the resolution of my image in the normal width of the page

Butbydecreasingthewidthofthepagetheimagelookslikethis.

Iwouldliketheimagetobethesamesizeasthe1smallimage

HTML

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

CSS

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

html html5 css css3 bootstrap-3

asked by anonymous 10.10.2017 / 16:02

1 answer

My code builds always incorporate Python 2.7 instead of 3.6, how to solve? How to solve this error 'Undefined variable' when accessing a view in laravel 5.1?

score 1 · Accepted Answer

Your CSS is apparently not being applied to the image. In the html that passed this being used a ID #imagem_principal and the CSS is in a CLASS .imagem_principal.

As you are using bootstrap you can add a class ="img-responsive" that might work or if you prefer, change your html by class="imagem_principal" and your 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 default 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 in several lines and your image will occupy 100% of the screen ..

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