Question

我想通过css转换将图像扩展为其父div的大小。以下是参数：

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

我目前的hack-imation看起来不专业，并且＆＃39; square-y＆＃39; ..

标记：

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

你可以看到我的黑客使用的颜色与我的图像颜色相同，使其看起来像图像正在增长到其父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>

使用css将图像缩放/转换为父级的大小

1 个答案: