Responsive absolutes Bild

Question

Ich habe jetzt eine Weile gesucht, kann aber nichts finden, was genau das ist, was ich brauche. Ich arbeite gerade an meiner ersten Seite und brauche Hilfe. Ich versuche ein Raster aus Bildern zu erstellen, die absolut positioniert sind, aber auch auf Monitore unterschiedlicher Größe reagieren, da es sich um eine Intranetlösung handelt.

HTML:

<a href="google.com"> 
    <img src="M.png" alt="A" class="image2" align="left" style=";"> 
</a> 

<a href="google.com/"> 
    <img src="kjsa.jpg" alt="C" class="image3" align="left" style="max-width:100%;"> 
</a> 

<a href="google.com"> 
    <img src="/example.png" alt="b" class="image4" align="left" style="max-width:100%;"> 
</a> 

<a href="google.com"> 
    <img src="exmple.png" alt="C" class="image5" align="left" style="max-width:100%;"> 
</a> 

<a href="google.com"> 
    <img src="example.png" alt="e" class="image6" align="left" style="max-width:100%;"> 
</a> 

<a href="google.com"> 
    <img src="example.png" alt="e" class="image7" align="left" style="max-width:100%;"> 
</a> 

CSS:

img.image2 { 
    position: absolute; 
    z-index: 10; 
    left: 33.15%; 
    max-width: 100%; 
} 

img.image3 { 
    position: absolute; 
    z-index: 10; 
    left: 44.21%; 
    max-width: 100%; 
} 

img.image4 { 
    position: absolute; 
    z-index: 10; 
    left: 55.26%; 
    max-width: 100%; 
} 
img.image5 { 
    position: absolute; 
    z-index: 10; 
    left: 33.15%; 
    top: 400px; 
    max-width: 100%; 
} 

img.image6 { 
    position: absolute; 
    z-index: 10; 
    left: 44.21%; 
    top: 400px; 
    max-width: 100%; 
} 

img.image7 { 
    position: absolute; 
    z-index: 10; 
    left: 55.26%; 
    top: 400px; 
    max-width: 100%; 
} 

Im Wesentlichen muss ich die Bilder die gleiche Position in Bezug auf den Bildschirm und Browsergröße behalten, aber ich brauche sie in der Lage sein, um die Größe je nach Bildschirmauflösung zu ändern.

Wie kann ich das erreichen?

Answer 1

Warum verwenden Sie absolute Position? !!!! , wenn Sie müssen das Layout GRID wollen und Responsive Design können Sie denselben Code haben wie:
HTML:

<div class="col"> 
     <a href="google.com"> 
     <img src="example.png" class="img"> 
     </a> 
    </div> 
    <div class="col"> 
     <a href="google.com"> 
     <img src="example.png" class="img"> 
     </a> 
    </div> 

CSS: (wenn Sie 5 Spalte => Breite: 100/5 = 17%)

* , *::after , *::before{ 
    box-sizing : border-box; 
} 
.col{ 
    width : 17%; 
    margin : 0 1%; 
    overflow : hidden; 
    float : left; 
} 
a{ 
    display : inline-block; 
} 
.img{ 
    width  : 100%; 
    height : auto; 
    max-width : 100%; 
} 

Danach, wenn Sie für ein anderes Gerät einstellen möchten, können Sie die MEDIA-Abfrage verwenden:

@media screen and (min-width: 62em) { /** 1em = 16px **/ 
    .col{ 
     width : 45%; 
     ..... 
    } 
    ..... 
}