Responsive Bilder skalieren auf Bildschirmbreite und behalten ihr Verhältnis

Question

Ich baue eine (was ich dachte, wäre) eine einfache Portfolio-Website.

Wie Sie aus dem beigefügten Upload sehen können, werden die Bilder über absolute in verschiedenen Positionen auf dem Bildschirm angezeigt. Wenn ich jedoch die Größe des Browsers ändere, werden die Bilder abgeschnitten. Ich habe auch versucht, Prozentsätze zu verwenden, aber dann ändert sich der Abstand zwischen den Bildern, wenn die Größe des Browsers geändert wird.

Was ich versuche zu erreichen ist, das Verhältnis der Bilder sowie den Abstand zwischen den Bildern auf jedem Bildschirm Gerät und Höhe konsistent zu halten. Ist das möglich? Wie kann ich es erreichen?

Answer 1

Eine Möglichkeit, dies zu tun, könnte mit der Verwendung von Medienabfragen sein.

ich ein sehr kurzes Beispiel gemacht habe, was ich im Kommentar wurde bedeutet:

See it here

I Flüssigkeit Breite und absolute Positionierung verwenden, um zu versuchen ein richtiges Verhältnis zu halten:

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

Es ist nicht vollständig funktional und ich habe nicht alles gemacht, aber ich hoffe, dass dieser Weg Ihnen helfen könnte.