4

I have images which dimension is (900x512). As I am going to make it responsive so images need to adjust within that screen width maintaining aspect ratio!!

Jim Fahad
  • 635
  • 1
  • 8
  • 21

3 Answers3

4

Use:

<img src="..." style="width: 100%; height: auto;" />

this will keep the aspect-ratio. height: auto will make sure the height is not set elsewhere (as mentioned by cale_b)

CoderPi
  • 12,985
  • 4
  • 34
  • 62
1

If you are using bootstrap, you can add the img-responsive class to your images.

This class applies the following css properties

  • Max-width: 100%
  • Height: auto
  • Display: block

The markup would look like this

<img class="img-responsive" alt="My image" >

Source: http://getbootstrap.com/css/#images-responsive

Richard Hamilton
  • 25,478
  • 10
  • 60
  • 87
0

You can achieve this by only setting a width or a height in your css.

.image{
  width: 40%;
  border: 1px solid #ffffff;
}
sillysicko
  • 126
  • 7
  • This will not work if the height is set anywhere else. You would also want a "height: auto;" to prevent height from being fixed and width being fluid. – random_user_name Nov 26 '15 at 19:01
  • true but then you will be disregarding the point that you should ONLY be setting width or height and not both. If you have controle over your own CSS, then this is a valid, and actually the only option. As soon as you set height and width, it will not work. – sillysicko Nov 26 '15 at 19:15