Beispiel:CSS-object-fit.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

 <title>object-fit</title>
 <style>

.fill { 

 object-fit: fill;

}

.contain { 

 object-fit: contain;

}

.cover { 

 object-fit: cover;

}

.none { 

 object-fit: none;

}

.scale-down { 

 object-fit: scale-down;

} figure { display:inline-block; }

figure > img { width: 12em; aspect-ratio: 4 /3; border: thin solid #000; }

figcaption { 

 font-family: monospace;

}

  • , ::before, ::after { box-sizing: border-box }

</style> </head>

<body>

object-fit

<figure> <img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Yin Yang" class="fill" /> <figcaption>object-fit: fill</figcaption> </figure> <figure> <img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Yin Yang" class="contain" /> <figcaption>object-fit: contain</figcaption> </figure> <figure> <img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Yin Yang" class="cover" /> 

   <figcaption>object-fit: cover</figcaption>

</figure> <figure> <img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Yin Yang" class="none" /> 

   <figcaption>object-fit: none</figcaption>

</figure> <figure> <img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Yin Yang" class="scale-down" /> 

   <figcaption>object-fit: scale-down</figcaption>

</figure>

Quelle: Wikimedia: <a href="https://wiki.selfhtml.org/images/5/54/Landscape.svg">https://commons.wikimedia.org/wiki/File:Mountain_landscape.svg</a>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-object-fit.html&oldid=100334“