レスポンシブな画像画面幅にスケーリングしてその比率を維持する

Question

シンプルなポートフォリオのWebサイトを構築しています。

あなたは添付のアップロードからもわかるように、画像が画面上の異なる位置に絶対介して表示されます。しかし、ブラウザのサイズを変更すると、画像が途切れてしまいます。また、パーセンテージを使用してみましたが、ブラウザのサイズを変更すると画像間の間隔が変わります。

私が達成しようとしているのは、画像の比率と画像間の間隔をすべての画面のデバイスと高さで一致させることです。これは可能ですか？どうすれば達成できますか？

Answer 1

メディアクエリを使用する方法があります。

私はコメントに意味されたものの非常に簡単な例を作った：

See it here

私は適切な比率を維持しようとする流体幅と絶対positionningを使用します。

img { position: absolute;} 
img:nth-child(1) { left: 0; top: 0; width: 40%;} 
img:nth-child(2) {right: 10%; top: 10px; width: 40%;} 
img:nth-child(3) {left: 0; top: 200px; width: 50%;} 
img:nth-child(4) {right: 0; top: 200px; width: 40%;} 

@media (min-width: 640px){ 
    img:nth-child(1) { left: 0; top: 0; width: 30%;} 
    img:nth-child(2) {right: 10%; top: 10px; width: 30%;} 
    img:nth-child(3) {left: 0; top: 200px; width: 40%;} 
    img:nth-child(4) {right: 0; top: 200px; width: 30%;} 
} 

それは完全に機能的ではなく、私はすべてを作っていませんが、それを行うこの方法があなたを助けることを願っています。