イメージをCSSの親のサイズに合わせる

Question

イメージを親divのサイズにCSSトランジションで拡大したい。

• 画像が中央
• から画像を拡大する必要があり、全体の長方形のdivの
• にソリューションを埋めなければならないのjavascript/jqueryのを使用してはならない

私の現在のハック - イメーション：ここではパラメータがありますプロフェッショナルではなく「正方形」と見える。

マークアップ：

<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

- それはまさにあなたが達成したい何をすべきかuderstandするのは難しいです。何がしたいことは、いくつかの絵を持っていることであり、その後、あなたはそれがホバー上の中心だから遷移する他のいくつかの絵をしたい場合は、これが役立つことがあります。

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>