Responsiveness on nested <div> with image

HTML-CSS
1

Hi there,

For a challenge on FCC, I want to design a polaroid shot as part of the page. I have successfully designed it using a image div, which has the image nested in. It looks good on my screen, but now I want it to be responsive.

The image-div is already responsive, but it doesn’t keep its aspect ratio which is essential to the polaroid look. Is there a way to make the whole design to be responsive within its current ratio?

Here is the CSS code:

#img-div {
  display: block;
  margin: 10px auto 10px auto;
  padding: 45px 5px 70px 5px ;
  max-width: 40%;
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 500px; /* width of container */
  height: 500px; /* height of container */
  object-fit: cover;
  object-position: center;
  border: 5px solid black;
}

A solution I have been thinking about: Could I nest my image-div and image into another div, and make this responsive?

2

There’s a solution on w3schools that I often use when I want my divs to keep their aspect ratio:

https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

3

That’s interesting. What if my aspect ratio is custom and not a typical aspect ratio (such as 16:9)? I tried what I found on the link with no luck. It will resize my container.

4

You can choose whatever you like as aspect ratio. If your divs have an aspect ratio of 5:4, your padding-top-value will be 100 * 4/5 % = 80%.