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。

Answer 2

不确定我完全明白你的意思。但是，如果您只希望元素在调整大小时具有相同的宽高比，则可以使用padding-top或padding-bottom百分比。使用填充百分比时的像素数量始终根据宽度而不是高度计算：https://css-tricks.com/aspect-ratio-boxes/

根据父元素

2 个答案: