Coding and Programming

So ersetzen Sie HTML-Attribute für Breite und Höhe durch CSS

Written by smirow

Eines der HTML-Elemente, das häufig mit CSS kollidiert, ist das img Element. Wie wir im Artikel „Fixing Cumulative Layout Shift Problems“ von Request Metrics auf DavidWalshBlog erfahren haben, ist die Bereitstellung von Bildabmessungen im image Das Tag trägt dazu bei, den Score Ihrer Website zu verbessern. Aber in einer Welt, in der Responsive Design an erster Stelle steht, müssen CSS und HTML zusammenarbeiten.

Die meisten Anpassungen des Responsive-Design-Stils erfolgen über max-width Werte, aber wenn Sie a height Wenn Sie Wert auf Ihr Bild legen, erhalten Sie möglicherweise ein verzerrtes Bild. Das Ziel sollte immer darin bestehen, Bilder in relativen Dimensionen anzuzeigen. Wie können wir also garantieren? height Das Attribut steht nicht in Konflikt mit max-width Werte?

Die Antwort ist so einfach wie height: auto!

/* assuming any media query */
img {
  /* Ensure the image doesn't go offscreen */
  max-width: 500px;
  /* Ensure the image height is responsive regardless of HTML attribute */
  height: auto;
}

Tanzen, um Nutzern und Suchmaschinen zu gefallen, ist immer ein unterhaltsamer Ausgleich. CSS und HTML sollten nie in Konflikt geraten, aber in manchen Fällen kommt es doch dazu. Nutzen Sie diesen Code zur Optimierung sowohl für Benutzer als auch für Suchmaschinen!

Fordern Sie echte Benutzerüberwachungsmetriken an
Fordern Sie echte Benutzerüberwachungsmetriken an
Fordern Sie echte Benutzerüberwachungsmetriken an
Fordern Sie echte Benutzerüberwachungsmetriken an
  • CSS-Animationen zwischen Medienabfragen

    CSS-Animationen zwischen Medienabfragen

    CSS-Animationen sind so gut wie geschnittenes Brot. CSS-Animationen sind effektiv, weil sie hardwarebeschleunigt werden können, keinen JavaScript-Overhead erfordern und aus sehr wenig CSS-Code bestehen. Sehr oft fügen wir CSS-Transformationen zu Elementen über CSS hinzu, während …

  • Ein Interview mit Éric Meyer

    Ein Interview mit Éric Meyer

    Ihre frühen CSS-Bücher haben maßgeblich zu meiner Liebe zu Front-End-Technologien beigetragen. Was hat Sie an CSS gereizt und dazu inspiriert, darüber zu schreiben? Auf den ersten Blick war es seine Einfachheit im Vergleich zum Tisch und dem Abstandshalter…

  • MooTools Image Protector 1.2: dwProtector

    MooTools Image Protector 1.2: dwProtector

    Bildschutz ist heutzutage ein heißes Thema im Internet, und warum sollte es das auch nicht sein? Wenn Sie zwei Stunden damit verbringen würden, eine großartige Grafik zu entwerfen, möchten Sie, dass sie in Sekundenschnelle zerstört wird? Sicher nicht! Deshalb habe ich ein Bild erstellt…

  • Implementierung von Basic und Fancy Show/Hide in MooTools 1.2

    Implementierung von Basic und Fancy Show/Hide in MooTools 1.2

    Einer der Vorteile von MooTools besteht darin, dass die Bibliothek selbst maximale Flexibilität innerhalb der bereitgestellten Klassen ermöglicht. Den Beweis können Sie in der Klassenimplementierungsmethode „Class“ sehen. Mithilfe der Methode „implementieren“ können Sie Ihre eigenen Methoden hinzufügen, um …

About the author

smirow

Leave a Comment