CODEWITHSUNDEEP
cssresponsive
Cameron
Cameron

Reputation: 28823

Make an element with set size responsive to parent element

I have an element on my page that will show an iPhone and screenshots within it. The phone and screens are set at the actual pixels so that real screenshots can be used within the element.

.iphone
    .iphone__outer {
        width: 416px;
        height: 850px;
        background: asset-url("iphone6-portrait.png") center center no-repeat;
        background-size: 416px 850px;
        position: relative;
        .iphone__inner {
            background: #ffffff;
            position: absolute;
            top: 86px;
            left: 20px;
            width: 375px;
            height: 667px;
        }
    }
}

However I'm wanting to make this element responsive. If I make the .iphone__outer just 100% then it will prevent me from positioning the screens correctly. How can I make an element with nested positioned absolute element responsive to its parent?

One idea I had was to use images for everything and then position them using percentages and remove the height. That way when the browser scales it would resize them accordingly and the height would be work fine. However I'm wanting to animate the images that are inside the .iphone__inner so therefore I need to set an overflow hidden on it and that would mean specifying a height which means I can't do it this way.

My current solution is to make the element smaller using scale when on a certain breakpoint:

@media (max-width: 767px){
    .iphone {
        width: 208px;
        height: 425px;
        .iphone__outer {
            transform: scale(.5);
            transform-origin: left top;
        }
    }
}

But I was hoping to avoid having to set it to a certain size using scale for the different breakpoints. As it means that it will be a set size and not using all available space. And instead I'd like to have it scale automatically based on the parent element. e.g. the iPhone will be displayed inside a grid system.

Here's an example: https://jsfiddle.net/mL5rpn5k/3/

And example of the HTML might be:

<div class="iphone">
  <div class="iphone__outer">
    <div class="iphone__inner">

<img src="screen1.png">
<img src="screen2.png">
<img src="screen3.png">

    </div>
  </div>
</div>

Upvotes: 0

Views: 111

Answers (2)

Huelfe
Huelfe

Reputation: 1836

This can be done with aspect ratio. Let's have a look:

SCSS:

.iphone__outer {
  width: 416px;
  height: 850px;
  background: url("//image.ibb.co/ktWBMS/iphone6_portrait.png") center center no-repeat;
  background-size: 416px 850px;
  position: relative;
  .iphone__inner {
    background: #ffffff;
    position: absolute;
    top: 86px;
    left: 20px;
    width: 375px;
    height: 667px;
  }
}

@media (max-width: 767px){
  .iphone__outer {
    height: 0;
    position: relative;
    padding-bottom: 196%;
    width: auto;
    background: url("//image.ibb.co/ktWBMS/iphone6_portrait.png") center center no-repeat;
    background-size: 100% 100%;
    .iphone__inner {
      background: #ffffff;
      position: absolute;
      top: (100%*86/850);
      left: (100%*20/416);
      width: (100%-((100%*20/416)*2));
      height: (100%-((100%*86/850)*2));
      right: (100%*20/416);
      bottom: (100%*86/850);
    }
  }
}

Also notice that SCSS can actually calculate your needed percentages as you can see above.

Working fiddle.

Upvotes: 1

teevik
teevik

Reputation: 112

Not sure i completely understand what you mean. But if you only want the element to have the same aspect ratio while being able to resize, you can use padding-top or padding-bottom with percentages. The pixel amount when using percentages for padding is always calculated from the width instead of height: https://css-tricks.com/aspect-ratio-boxes/

Upvotes: 0

Related Questions