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

试试这个，

不要在 % 中使用 left in vh for .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;
}

使用 CSS 将照片放入相框中

Fitting a photo into a frame with CSS

css

css-position

flexbox

css-transforms