Question

我有这样的图像：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="sliderimg" style="background-image: url('http://images.unsplash.com/photo-1419064642531-e575728395f2?crop=entropy&fit=crop&fm=jpg&h=800&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2400')">
  <div class="carousel-caption">
    <small>FEATURED ARTICLE</small>
  </div>
</div>

"@angular/animations": "~4.3.6",
"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "^4.3.6",
"@angular/compiler": "^4.3.6",
"@angular/core": "^4.3.6",
"@angular/flex-layout": "^2.0.0-beta.9",
"@angular/forms": "^4.3.6",
"@angular/http": "^4.3.6",
"@angular/material": "^2.0.0-beta.10",
"@angular/platform-browser": "^4.3.6",
"@angular/platform-browser-dynamic": "^4.3.6",
"@angular/router": "^4.3.6",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.1.0",
"zone.js": "^0.8.10"

但它无法运行。可以请帮助我。

demo

Answer 1

我不确定文档加载是否发生转换。我会用动画代替：

@keyframes example {
  from {transform: scale(1, 1)}
  to {transform: scale(1.05, 1.05)}
}

div.sliderimg {
  animation-name:example;
  animation-duration:5s;
  animation-fill-mode: forwards;
}

Answer 2

由于您将jQuery链接到文档，因此您可以使用它来添加类onload。 transition CSS将从此处完成工作。

我建议使用background-size而不是transform：

＆＃13;

$(document).ready(function() {
  $(".sliderimg").addClass("loaded");
});

＆＃13;

div.sliderimg {
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 5000ms linear 1s;
  background-size: 100% auto;
  position: relative;
}

div.loaded {
  background-size: 105% auto;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="sliderimg" style="background-image: url('http://images.unsplash.com/photo-1419064642531-e575728395f2?crop=entropy&fit=crop&fm=jpg&h=800&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2400')">
  <div class="carousel-caption">
    <small>FEATURED ARTICLE</small>
  </div>
</div>

＆＃13;

在html / css中缩放图像

2 个答案: