Beispiel:CSS-object-1.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>kreisrunder Ausschnitt</title>
  <style>
main {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}

section > img {
  width: 15em;
  height: 20em;
  border: 1px solid #000;
}

.rund {
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 50%;
  width: 15em;
  height: 15em;
}

.vergleich {
  object-fit: cover;
  object-position: 50% 100%;
  border-radius: 50%;
  width: 15em;
  height: 15em;
}

</style>
</head>
 
<body>
  <h1>kreisrunder Ausschnitt eines Bildes</h1>
<main>

<section>
  <h2>Original</h2>
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Self-portrait_by_Albrecht_D%C3%BCrer.jpg" alt="Dürer" />
</section>
<section>
  <h2>abgerundet</h2>
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Self-portrait_by_Albrecht_D%C3%BCrer.jpg" alt="Dürer" class="rund"/>
</section>
<section>
  <h2>Vergleich</h2>
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Self-portrait_by_Albrecht_D%C3%BCrer.jpg" alt="Dürer" class="vergleich"/>
</section>

</main>
<p><cite>Quelle: Wikimedia:  <a href="https://de.wikipedia.org/wiki/Albrecht_D%C3%BCrer#/media/File:Self-portrait_by_Albrecht_D%C3%BCrer.jpg">https://de.wikipedia.org/wiki/Albrecht_Dürer#/media/File:Self-portrait_by_Albrecht_Dürer.jpg</a></cite></p>

</body>
</html>