CODEWITHSUNDEEP
cssimageresponsive-design
bear
bear

Reputation: 33

How do i get my image to be responsive?

Im trying to get my image responsive so that when its on a mobile device de image will scale down but i cant get it to work.

I have tried using height and width 100%.

Can anyone help me?

this is my website: www.promegaekonomi.se (its the bbig image thats under my meny)

Upvotes: 0

Views: 103

Answers (4)

Bipon Biswas
Bipon Biswas

Reputation: 11635

If you are using Bootstrap 3.0 then you can add only class="img-responsive"

Something like this:

<img  class="img-responsive" src="img/sponsor/nescafe.png" alt="nescafe">

Otherwise: 

<img  class="responsive-photo" src="img/sponsor/nescafe.png" alt="nescafe">

CSS: 

.responsive-photo{
    height: auto;
    max-width: 100%;
}

Upvotes: 8

Brian FitzGerald
Brian FitzGerald

Reputation: 3109

max-width: 100% should do the trick

if your image is applied with css (rather than in an <img> tag), you could try:

background-size: cover or background-size: 100% auto

Upvotes: 2

Michael Yee
Michael Yee

Reputation: 23

Using css:

    img{height:auto; width:100%;}

OR...

you can covert your image to SVG file and it will keep adapt its size automatically...

Upvotes: 0

Nickfmc
Nickfmc

Reputation: 379

sorry cant add comment, if it is an image you may also want to add height:auto;tomax-width:100%

edit- looking at your site if its the background image you are referring to spanning full width you will can add background-size:cover; and change the height using media queries as your site scales.

Upvotes: 0

Related Questions