CODEWITHSUNDEEP
javascriptcssresponsive-designdimension
Jim Fahad
Jim Fahad

Reputation: 635

Maintaining the aspect ratio of Image using CSS or jQuery?

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!!

Upvotes: 4

Views: 78

Answers (3)

Richard Hamilton
Richard Hamilton

Reputation: 26444

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

Upvotes: 1

CoderPi
CoderPi

Reputation: 13221

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)

Upvotes: 4

sillysicko
sillysicko

Reputation: 126

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

.image{
  width: 40%;
  border: 1px solid #ffffff;
}

Upvotes: 0

Related Questions