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;
	height: 9em;
	border: thin solid #000;
}

figcaption {
  font-family: monospace;
}

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

h1 {
	border-radius: 0 8px 8px;
	border: thin solid #d5d5d5;
	padding: 10px;
	margin: 10px auto;
	background: #F1F3F4 url("//wiki.selfhtml.org/images/9/99/Selfhtml-beispiel-logo.png") 10px 5px no-repeat;
	padding-left: 200px;
}

</style>
</head>
 
<body>
<h1>object-fit</h1>
<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>     
<p><cite>Quelle: Wikimedia:  <a href="https://wiki.selfhtml.org/images/5/54/Landscape.svg">https://commons.wikimedia.org/wiki/File:Mountain_landscape.svg</a></cite>
</p>

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