How to avoid image scrolling?

Question

How to avoid image scrolling?

Navigation

#1 by (0 votes)

2

I avoided asking someone for help for my own learning. But of all the difficulties that I have been facing, I can not solve it and it is the last step of the project.

I need to insert a cell phone image in the center of the screen. So far so good. Researching solutions found to make the responsive image. The problem is that the image is left with the scroll bar active at lower resolutions. How do I make the image resize and skip the scroll?

Follow the code I have so far.

  <style type="text/css">
   body{
   background: #363636;
   }
   .backgroundCell{
   width: 100%;
   height: auto;
   }
   .backgroundCell img{
   max-width: 556px;   /* Máximo da largura da imagem */
   width: 100%;
   max-height: 1139px;  /* Máximo da altura da imagem */
   min-height: auto;      /* Mínimo da altura, por padrão “auto” */
   background-size: 100%;
   background-repeat: no-repeat;            
   }
</style>
<div class="main-panel">
   <div class="content">
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-12">
               <center>
                  <div class="backgroundCell">
                     <img src='assets/img/iphone_bg.png' />
                  </div>
               </center>
            </div>
         </div>
      </div>
   </div>
</div>

html css bootstrap

asked by anonymous 20.10.2016 / 19:07

1 answer

Masks in form fields in woocommerce Select Query with AJAX and PHP

score 0 · Answer 1

Dude, do it like this:

In the .backgroundCell, leave it like this:

.backgroundCell{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row;
}

And automatically it will align in the exact middle of the screen!

Example in jsfiddle: link NOTE: In the example I set a fixed height for the body to work in jsfiddle, but it will depend on your code!