屏幕调整大小时的Css放大效果

Question

我正在尝试在屏幕调整大小上创建缩放效果，该效果与附加图像示例相同。

首先，我希望它看起来像是从右侧切出的图像（但剩余高度），然后我想从各个方向放大图像。有人可以建议我如何创造这种效果？

我知道放大我应该使用：

transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */

Answer 1

它与放大效果无关，它更多地与响应式设计有关。我不认为这里有完美的解决方案，它取决于您在页面上的内容以及您想要用作背景的图像。如果没有任何媒体查询，请在此处查看我的解决方案：https://jsfiddle.net/9htcmus7/

HTML：

<div class="container">
  <div class="content">
    <h1>Lorem ipsum</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat, risus vitae aliquet consequat, eros tortor tincidunt lacus, in mollis mi est id tellus. Nulla id odio nec tortor vestibulum suscipit non id metus.
    </p>
  </div>
</div>

CSS：

.container {
  width: 100%;
  box-sizing: border-box;
  padding: 10vw 20vw;
  background-image: url(http://weknowyourdreams.com/images/mountain/mountain-04.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 25%;
}

.content {
  font-family: sans-serif;
  line-height: 2;
  color: white;
  width: 25em;
  max-width: 100%;
}

h1 {
  font-weight: 300;
}