要素を静的位置から絶対位置/固定位置に変換することは可能ですか？

Question

は、私はそれを置くと、私はフルスクリーン、絶対的な位置付けになるためにそれを拡張したい静的要素

<img src="whatever.jpg" /> 

を持っています。これはちょうどCSSを使用して行うことが可能ですか？

Answer 1

あなたはホバーに100 vw/vhにposition: absolute、変更幅と高さを使用することができますが、あなたは、幅とIMGの高さを宣言する必要がある最初の移行を取得します。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
img { 
 
    transition: all 0.3s linear; 
 
    width: 200px; 
 
    height: 150px; 
 
    position: absolute; 
 
} 
 
img:hover { 
 
    width: 100vw; 
 
    height: 100vh; 
 
}

<img src="http://placehold.it/350x150">

Answer 2

私は多すぎるCSSプロパティを使用しているかもしれませんが、それは単に何が起こるかを説明することができます。

// Normal status - without hover 
img { 
    // Set the position relative to it's parent (body in this case) 
    position: relative; 
    // Automatically calculate distance between the top, left, right and bottom of the window 
    top: auto; 
    left: auto; 
    right: auto; 
    bottom: auto; 
    // Static width/height 
    width: 250px; 
    height: 250px; 
} 

// Hovered status 
img:hover { 
    // Force the image in an fixed position (not respecting other elements) 
    position: fixed; 
    // Make sure it aligns to all sides 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    // Force it to have the height and width of the viewport (100%) 
    width: 100vw; 
    height: 100vh; 
}