CODEWITHSUNDEEP
javascriptjqueryhtmlcss
aadu
aadu

Reputation: 3254

Controlling aspect ratio of images with % width and height of body

I have these two images appearing in my site that I am pulling from another company's server. I need these photos to scale with the browser window so I've given them a % width and height to scale with the body.

The problem is some of these images are different sizes and I need all the images to look identical to each other. This is easy to do when I know the values of the image's width and height because I can just crop or resize. But how can you maintain a ratio with a scalable width and height?

I think some JavaScript is required to do this. Here's the CSS that I have:

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.image {
  width: 40%;
  height: 40%;
  margin: 1%;
}

Upvotes: 0

Views: 137

Answers (2)

Adam Sanderson
Adam Sanderson

Reputation: 490

If you're not concerned about IE8, you can just specify the width. Most browsers will maintain the aspect ratio for you.

Upvotes: 1

easwee
easwee

Reputation: 15895

Doing it with CSS only will take you a lot of time to optimize for all brosers.

With a few modifications and js you may achieve this using Perfect background image

Upvotes: 0

Related Questions