使用CSS将照片放入框架中

Question

我已经将图像安装到具有一定尺寸的CSS框架中，但是希望此图像能够完全响应。在CSS3的Flexbox世界中，大量带有转换的选项。如何使用某些较新的CSS属性确保所有尺寸的图像均保持在旋转的帧中？

.main {
  position:relative;
}

.insert {
  /* max-height: 300px; */
    position: absolute;
    bottom: 19%;
    height: 110px;
    width: 110px;
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    left: 13.5%;
}

<div class="main">
<img class="holder" style="max-height:300px" src="https://s15.postimg.cc/5fpragxnv/holder.jpg">

<img class="insert" style="max-height:300px" src="https://s15.postimg.cc/h4tqygyx7/insert.jpg">
</div>

这里是JSFiddle

Answer 1

尝试一下

代替在％h中使用％vh中的.insert

.main {
    position:relative;
}

.insert {
    position: absolute;
    bottom: 19%;
    height: 110px;
    width: 110px;
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    left: 26vh;
}