1

I am making a web, where I have to use an image for a desktop view and, instead of a "responsive" design, when the page gets smaller, the image gets cropped.

So, in order to do that I made a css rule establishing a min-width of 700px.

Problem is that, when I see the page in my cel, it has an overflow-x because of the image.

I have tried with overflow-x hidden and making and extra div like...

<div style="max-width: 100%; overflow-x: hidden;">
    <img id="pic-bg" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-margin no-padding" src="../images/unico.svg">
</div>

... but it did not work either.

This is the css of the image I am talking about:

@media screen and (max-width: 767px){

    #pic-bg{
        min-width: 700px;
    }
}

Is it because of this min-width? How do I have to do it instead, for the image to gets cropped avoiding the overflow?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
user3074989
  • 105
  • 2
  • 9

1 Answers1

1

Try with this:
html:
<img src="">
css:
img {height:100px;}

It will automatically resize your image.

An unknown developer
  • 11
  • 2