代码之家 › 专栏 › 技术社区 › Ali

在html/css中缩放图像

css html

Ali · 技术社区 · 7 年前

div.sliderimg {
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 5000ms linear 0s;
  transform: scale(1.05, 1.05);
}

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

但它无法运行。能帮我一下吗。

demo

2 回复 | 直到 7 年前

Marcin Szwarc 7 年前

我不确定文档加载时是否发生转换。我会使用动画:

@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;
}

G-Cyrillus 7 年前

因为您将jQuery链接到了文档,所以可以使用它添加onload类。 transition

我建议使用背景大小,而不是变换:

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

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;
}

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前