CODEWITHSUNDEEP
htmlcssimageresponsive-design
Sverkel
Sverkel

Reputation: 7

make image responsive in mobile

I am trying to make a product page where I want the picture to scale depending on the screen, but I'm stuck and can't get on.

I have tried all the pages in here on the same issue, but just can't get it to work.

HTML CODE: 

<div class="container4"><img src="../billeder/antennefor.jpg" width="797" height="576" alt=""/></div>

CSS CODE:

.container4{
    background-image:url(../billeder/antennefor.jpg);
    background-repeat:no-repeat;
    border:1px solid #D54244;
    background-color:transparent;
    width: 100%;
    max-width: 100%:
}

Upvotes: 0

Views: 331

Answers (4)

dippas
dippas

Reputation: 60603

Your issue is you are using HTML tag width and height, this is not good practice.

So remove those tags.

Instead of this:

<img src="../billeder/antennefor.jpg" width="797" height="576" alt=""/>

Have this

<img src="../billeder/antennefor.jpg" alt=""/>

and in your CSS you only need to have max-width:100% applied to img

Upvotes: 1

Yan
Yan

Reputation: 423

Maybe consider using Bootstrap?

That's what I use to make my images responsive. all you have to do is include the Bootstrap CSS and then apply the "img-responsive" class to your images.

More info @ http://getbootstrap.com/css/#images

Upvotes: 0

something
something

Reputation: 99

in your image element set the width in percent (%) and don't mind about the height.

this maybe help to solve your problem.

Upvotes: 0

fabiovaz
fabiovaz

Reputation: 536

I dont know if is thaht, but you can test.

HTML:

<div class="container4">
  <img src="http://lorempixel.com/400/200" alt="" />
</div>

CSS:

.container4 img {
  width: 100%;
}

http://codepen.io/fabiovaz/pen/BKpwxX

Upvotes: 0

Related Questions