jquery - 使用 css 将图像缩放/过渡到父级的大小

Question

我想使用 CSS 过渡将图像扩展到其父 div 的大小。以下是参数:

• 图像应该从中心展开
• 图片应该填满整个矩形div
• 解决方案不应使用 javascript/jquery

我目前的 hack-imation 看起来不专业而且“方正”..

标记:

<div class="col info contain">
                <!-- <h4>Info Block One</h4> -->
                <p><img alt="blob" class="avatar-wobble imageBg" width="180" height="200" src="static/991100.jpg"></p>
                <p class="filler991100"></p>
                <p><img alt="blob" class="imageTop image img-circle" width="60" height="60" src="static/hairface.jpg"></p>
            </div>

CSS:

    .contain {
    position: relative;
}

.img-circle {
    border-radius: 50%;
    width:70px;
    height:70px;
    border:1px solid black;
    transform: translate3d(0px, 0px, 0px);
    transition: transform 0.5s ease-in-out;
}

.info:hover .img-circle {
    transform: translate3d(0px, -150px, 0px)
        scale(0.7);
}


.image {
    position: absolute;
}

.imageBg {
    z-index: 0;
}

.imageTop {
    z-index: 1;
    top:150px;
    left:75px;
}

.filler991100 {
    display: block;
    background: #991100;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    transition: all 0.5s ease-in-out;
}

.info:hover .filler991100{
    width: 100%;
    height: 100%;
    border-radius:0;
    top: 0;
    margin-top: 0;
    left: 0;
    margin-left: 0;
    background: #991100;
}

您可以看到，我的 hack 使用了一个与我的图像具有相同颜色的类，以使其看起来像图像正在增长到其父 div 的矩形形状。我在这里使用了一张图片，因为它的形状是不规则的。这是它目前的样子:

https://youtu.be/45VNx7JbRc4

这是我想要的:

https://youtu.be/QwjPQ5G2W0o

Answer 1

如上所述 - 很难理解您到底想要实现什么。如果你想要一些图片，然后你想要一些其他图片在悬停时从它的中心过渡，这可能会有所帮助:

html, body {
  margin: 0;
}
body {
  width: 100vw;
  height: 100vh;
}
.contain {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-wobble{
  margin: auto;
  position: relative;
  width: 200px;
  height: 200px;
  background-image: url(http://via.placeholder.com/200x200);
  overflow: hidden;
}
.avatar-wobble::after {
  content: '';
  background: url(http://lorempixel.com/200/200);
  background-position: center center;
  position: absolute;
  height: 200%;
  width: 200%;
  transition: all 0.5s;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  clip-path: circle(50px at center);
}
.avatar-wobble:hover::after {
  clip-path: circle(200px at center);
}

<div class="contain">
  <div class="avatar-wobble"></div>
</div>