Baseline Widely available
Die width-Eigenschaft des HTMLImageElement Interfaces gibt die Breite an, mit der ein Bild in CSS-Pixel gezeichnet wird, wenn es auf ein visuelles Medium wie einen Bildschirm oder Drucker dargestellt wird. Andernfalls entspricht sie der natürlichen, für die Pixeldichte korrigierten Breite des Bildes.
Ein ganzzahliger Wert, der die Breite des Bildes angibt. Die Art und Weise, wie die Breite definiert ist, hängt davon ab, ob das Bild auf ein visuelles Medium wie einen Bildschirm oder Drucker gerendert wird:
naturalWidth angegeben wird.In diesem Beispiel werden zwei unterschiedliche GröÃen für ein Bild einer Uhr mit dem srcset Attribut bereitgestellt. Eine ist 200px breit und die andere ist 400px breit. Das sizes Attribut wird verwendet, um die Breite anzugeben, bei der das Bild je nach Breite des Viewports gezeichnet werden soll.
Für Viewports bis zu 400px Breite wird das Bild mit einer Breite von 200px gezeichnet. Andernfalls wird es mit 400px gezeichnet.
<p>Image width: <span class="size">?</span>px (resize to update)</p>
<img
src="/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png"
alt="Clock"
srcset="
/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png 200w,
/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 400w
"
sizes="(width <= 400px) 200px, 400px" />
JavaScript betrachtet die width-Eigenschaft, um die aktuelle Breite des Bildes zu bestimmen. Dies erfolgt in den Event-Handlern des Fenster-load und resize-Events, sodass die aktuellsten Breiteninformationen immer verfügbar sind.
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");
const updateWidth = (event) => {
output.innerText = clockImage.width;
};
window.addEventListener("load", updateWidth);
window.addEventListener("resize", updateWidth);
Dieses Beispiel lässt sich möglicherweise einfacher in einem eigenen Fenster ausprobieren.
Spezifikationen Browser-Kompatibilität Siehe auchRetroSearch 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