css - 使具有设置大小的元素响应父元素

Question

我的页面上有一个元素，它将显示 iPhone 和其中的屏幕截图。手机和屏幕设置为实际像素，以便可以在元素内使用真实屏幕截图。

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

但是我想让这个元素响应。如果我将 .iphone__outer 设置为 100%，那么它会阻止我正确定位屏幕。如何使具有嵌套定位绝对元素的元素响应其父元素？

我的一个想法是对所有内容都使用图像，然后使用百分比定位它们并移除高度。这样，当浏览器缩放时，它会相应地调整它们的大小，并且高度也可以正常工作。但是我想为 .iphone__inner 中的图像设置动画，因此我需要在其上设置一个隐藏的溢出，这意味着指定一个高度，这意味着我不能这样做.

我目前的解决方案是在某个断点处使用缩放使元素变小:

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

但我希望避免使用不同断点的比例将其设置为特定大小。因为这意味着它将是一个固定大小，而不是使用所有可用空间。相反，我想让它根据父元素自动缩放。例如iPhone 将显示在网格系统中。

这是一个例子:https://jsfiddle.net/mL5rpn5k/3/

HTML 的示例可能是:

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

Answer 1

这可以通过宽高比来完成。让我们来看看:

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

另请注意，如上所示，SCSS 实际上可以计算您需要的百分比。

工作 fiddle .