MrMurphy1: CSS Bilder nebeneinander und asutomatisch anpassend

Beitrag lesen

SELF-Forum

CSS Bilder nebeneinander und asutomatisch anpassend

MrMurphy1
– Informationen zu den Bewertungsregeln

Hallo

Folgendes Problem. Ich habe 3 Bilder, die sich dynamisch anpassen sollen.

sich dann bei kleiner werdenden Viewport, im Verhältnis richtig verkleinern.

Meinst du so:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Bilder nebeneinander 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   /*Grundeinstellungen*/
   @media all {
      * {
         box-sizing: border-box;
      }
      body {
         padding: 0;
      }
      /*Für IE 11*/
      main {
         display: block;
      }
      div {
         overflow: hidden;
         border: 1px solid orange;
      }
      img {
         display: block;
         width: 33.33%;
         max-width: 100%;
         max-height: 100%;
         float: left;
      }
   }
   </style>
</head>
<body>
   <div>
      <img src="http://lorempixel.com/600/400/sports" alt="Beispielbild">
      <img src="http://lorempixel.com/800/600/city" alt="Beispielbild">
      <img src="http://lorempixel.com/500/300/nightlife" alt="Beispielbild">
   </div>
</body>
</html>

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln