高さが同じままの状態で、ホバー上のdivの幅を広げようとしています。パディングトップからの高さを得ることができるので、これは難しいです：サイズ変更可能な正方形にすることができる100％。自然に高さを上げるほど、身長も有機的にも増します。 （divの高さと幅は通常の状態で等しいので、それは完璧な四角です）ホバリング時の幅を広げる正方形パディングトップ：100％div
これを実現する方法がわかりません。
https://jsfiddle.net/9tc2mbwd/2/
.work-container { padding-top: 100%; }
あなたは.work-wrapperに固定幅と高さを設定したくない場合は、... が.work-containerホバー要素を作成し、次のように実行します。あなたが必要なので、
.work-wrapper {
width: 30%;
}
.work-container {
padding-top: 100%;
width: 100%;
transition: all ease 0.5s;
}
.work-container:hover {
width: 200%;
}
.work-1 {
background-color: #FEF102;
}<div class="work-wrapper">
<div class="work-container work-1">
</div>
</div>最高の答えのように見えますが、それが正しいかどうかを確認するために戻ってきます。 –
私の答えがあなたの必要性のために最善であることを祈っています:) – Jefsama
確かに、どうもありがとう。 –
あなたは、ビューポートユニットを使用することができますし、このように、ワークのラッパーを取り除く：
.work-container {
\t width: 30vw;
\t height: 30vw;
\t transition: all ease 0.5s;
}
.work-container:hover {
\t width: 50vw;
}
.work-1 {
\t background-color: #FEF102;
}<div class="work-container work-1">
</div>便利なヒントですが残念ながら別のdiv内にありますが、％はビューポートの幅に基づいていません。 –
さて、あなたは取り除くことによって始めることができますこれを「.work-wrapper」に追加する：
width:150px;
height:150px;
overflow: hidden;
すべて同じです！ これが役立つことを願っています！
ありがとうございますが、完全に応答する必要があります。したがって、％の値。 –
divの幅を絶対サイズのないコンテナの30％に設定し、高さを同じにしたいので、 'padding-top'プロパティを使用します。 – Nekomajin42
はい通常の状態で幅と高さを同じにする必要があります。私はそれをもっと明確にします。 –
正解を選んだらあなたのフレンドリーな思い出を見つけてください –