How to avoid scrolling in picture?

Asked

Viewed 520 times

4

I avoided asking anyone for help for my own learning. But of all the difficulties that I have been facing this cannot solve and is the last stage of the project.

I need to insert a mobile image in the center of the screen. So far everything right. Searching found solutions to leave the image responsive. The problem is that the image gets the scroll bar active at smaller resolutions. How do I resize the image and avoid scrolling?

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

  • By the way you’re wearing bootstrap, then you can apply in the image the class img-responsive. Also, just add overflow: hidden image to not display scrollbars.

  • Yes @Ricardopunctual, I’m using bootstrap. I’ve tried with this class, it didn’t help much. I have tried with the class mentioned and also with the overflow. The problem continues. The scroll continues to be displayed. I think the problem really is the size of the image, because when you roll it, the rest of the image appears.

  • So the scroll bar is in the image container, which can be any of the Divs that contains it, the div with class "backgroundCell" for example. Tried to put the overflow: hidden in that div?

  • The scroll was in the main-panel div. I was testing one by one until I found it. Now the image is cropped.

1 answer

1

Man, do it like this:

No . backgroundCell leave so:

.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: https://jsfiddle.net/ovh4a01m/ NOTE: In the example I set a fixed height for the body to work in jsfiddle, but then it will depend on your code!

  • The problem persists, friend. Thank you for trying.

Browser other questions tagged html css bootstrap

You are not signed in. Login or sign up in order to post.