Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/API/HTMLImageElement/sizes below:

HTMLImageElement: sizes-Eigenschaft - Web-APIs | MDN

Baseline Widely available

Die HTMLImageElement-Eigenschaft sizes ermöglicht es Ihnen, die Layoutbreite des Bildes für jede der aufgelisteten Medienbedingungen anzugeben. Dies bietet die Möglichkeit, automatisch zwischen verschiedenen Bildern zu wählen—sogar Bildern mit unterschiedlichen Ausrichtungen oder Seitenverhältnissen—wenn sich der Dokumentenzustand ändert, um verschiedene Medienbedingungen zu erfüllen.

Jede Bedingung wird im selben Bedingungsformat angegeben, das auch von Medienabfragen verwendet wird.

Ein String, der eine durch Kommas getrennte Liste von Quellen-Größen-Beschreibungen enthält, gefolgt von einer optionalen Fallback-Größe. Jede Quellen-Größen-Beschreibung besteht aus einer Medienbedingung, gefolgt von mindestens einem Leerzeichen, dann dem Quellen-Größenwert, der für das Bild verwendet werden soll, wenn die Medienbedingung zu true evaluiert wird. Sie können den Wert auto verwenden, um die gesamte Liste der Größen oder den ersten Eintrag in der Liste zu ersetzen. Weitere Informationen über die Syntax des sizes-Attributs finden Sie unter <img>.

In diesem Beispiel wird ein blog-ähnliches Layout erstellt, das einen Text und ein Bild anzeigt, für das drei Größenangaben je nach Fensterbreite angegeben sind. Auch drei Versionen des Bildes sind verfügbar, deren Breiten angegeben sind. Der Browser verwendet all diese Informationen und wählt ein Bild und eine Breite aus, die am besten den spezifizierten Werten entsprechen.

Wie genau die Bilder verwendet werden, kann vom Browser und der Pixeldichte des Anzeigegeräts des Benutzers abhängen.

Schaltflächen am unteren Rand des Beispiels ermöglichen es Ihnen, die sizes-Eigenschaft geringfügig zu verändern und die größte der drei Breiten für das Bild zwischen 40em und 50em zu wechseln.

<article>
  <h1>An amazing headline</h1>
  <div class="test"></div>
  <p>
    This is even more amazing content text. It's really spectacular. And
    fascinating. Oh, it's also clever and witty. Award-winning stuff, I'm sure.
  </p>
  <img
    src="new-york-skyline-wide.jpg"
    srcset="
      new-york-skyline-wide.jpg 3724w,
      new-york-skyline-4by3.jpg 1961w,
      new-york-skyline-tall.jpg 1060w
    "
    sizes="(50em <= width <= 60em) 50em,
              (30em <= width < 50em) 30em,
              (width < 30em) 20em"
    alt="The New York City skyline on a beautiful day, with the One World Trade Center building in the middle." />
  <p>
    Then there's even more amazing stuff to say down here. Can you believe it? I
    sure can't.
  </p>

  <button id="break40">Last Width: 40em</button>
  <button id="break50">Last Width: 50em</button>
</article>

article {
  margin: 1em;
  max-width: 60em;
  min-width: 20em;
  border: 4em solid #880e4f;
  border-radius: 7em;
  padding: 1.5em;
  font:
    16px "Open Sans",
    Verdana,
    Arial,
    Helvetica,
    sans-serif;
}

article img {
  display: block;
  max-width: 100%;
  border: 1px solid #888888;
  box-shadow: 0 0.5em 0.3em #888888;
  margin-bottom: 1.25em;
}

Der JavaScript-Code behandelt die beiden Schaltflächen, die es Ihnen ermöglichen, die dritte Breitenoption zwischen 40em und 50em zu wechseln; dies wird durch die Behandlung des click-Ereignisses erreicht, indem die JavaScript-String-Methode replace() verwendet wird, um den relevanten Teil des sizes-Strings zu ersetzen.

const image = document.querySelector("article img");
const break40 = document.getElementById("break40");
const break50 = document.getElementById("break50");

break40.addEventListener(
  "click",
  () => (image.sizes = image.sizes.replace(/50em,/, "40em,")),
);

break50.addEventListener(
  "click",
  () => (image.sizes = image.sizes.replace(/40em,/, "50em,")),
);

Die Seite ist am besten in einem eigenen Fenster zu betrachten, damit Sie die Größen vollständig anpassen können.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4