Question

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%;
}

Answer 1

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