CSS Img – Positionieren Und Zentrieren

Có thể bạn quan tâm

Kontakt
Impressum
🔎

CSS
HTML
Javascript Basis
Javascript für Webseiten
Tutorials
SVG / 3D-Canvas MathML

Bilder an den Rand, Bilder nebeneinander

Bilder sind inline-Elemente, d.h. sie erzeugen keinen Zeilenumbruch. Bilder werden i.d.R. in HTML-Tags wie div oder figure gesetzt, um sie gezielt auf der Webseite zu positionieren.

Bilder rechts oder links an den Rand des umfassenden Elements oder nebeneinander zu setzen gehört zu den Routinearbeiten in jedem Content Management System: Dafür bekommen Bilder CSS float: left oder float: right. float kann ein Element allerdings nicht zentrieren.

Bilder mit flexbox horizontal und vertikal zentrieren

Heute tendiert das Webdesign eher zu zentrierten mittig gesetzten Bildern, statt sie rechts oder links vom Text umfließen zu lassen. display: flex zentriert Bilder einfacher als die klassische Methode aus position, left, top und margin.

.flex { display: flex; justify-content: center; align-items: center; } <div class="flex"> <img src="donut.jpg" width="215" height="183" alt="…"> </div> Bild senkrecht und wagerecht zentriert

Bilder an den Platz anpassen mit object-fit

CSS object-fit passt Bilder an den verfügbaren Platz im Layout an, entweder unter Beibehaltung des Seitenverhältnisses oder durch Aufziehen und Dehnen, um den gesamten verfügbaren Platz mit dem Bild zu füllen. tartuffo-720

Das ist praktisch, wenn das Bild oder Video nicht vorher schon im Bildbearbeitungsprogramm oder beim Videoschnitt auf ein bestimmtes Seitenverhältnis zugeschnitten wurde.

<div class="object-fit"> <img src="tartuffo.jpg" width="720" height="347" alt="…"> </div> .object-fit { width: 300px; height: 300px; margin: 4em auto; border:1px solid green; } .object-fit img { object-fit: cover; width: 100%; height: 100%; }

Mehr zu Bilder im img-Tag mit object-fit anpassen

Alle Evergreen-Browser unterstützen object-fit, aber IE bleibt außen vor. Solange IE11 unterstützt werden muss, bleiben die bewährten Techniken.

aspect-ratio: Seitenverhältnis

Wenn das Bild noch nicht geladen ist, weiß der Browser nicht, wie hoch es sein wird. Der Platz bleibt leer, bis das Bild geladen ist und beim Laden kommt es zu einem »Layout Shift«.

aspect-ratio wird wichtig, wenn Layout-Stabilität oder Platzhalterverhalten wichtig sind.

.card { aspect-ratio: 980/723; width: 85%; max-width: 560px; background: url("paisley.jpg"); margin: auto; } Bild laden

Bilder als background-image zentrieren

Bilder können nicht nur über das img-Tag eingebunden werden, sondern auch via CSS background-image. Dann bietet background-position die einfachste Technik, das Bild innerhalb seines umfassenden Blocks zu zentrieren.

<div class="center-frame"> <div class="wild-frame"></div> </div> .center-frame { width: 300px; height: 200px; overflow: hidden } .wild-frame { background: url(city-490.webp) no-repeat center; width:100%; height: 100% }

Thumbnails à la WordPress: object-fit

Die Medienübersicht von WordPress zeigt Bilder als quadratische Thumbnails. Dahinter steckt einfaches CSS, das die Bilder zentriert und beschneidet.

Das HTML-Markup besteht aus einem div-Element mit class="thumbnail" und dem Originalbildern im Hochformat und Querformat.

<div class="thumbnail"> <img src="DSC00546-1024x682.jpg" width="1024" height="682" alt="…"> </div> <div class="thumbnail"> <img class="portrait" src="DSC04525-967x1024.jpg" width="967" height="1024" alt="…"> </div> Thumbnail Kuppel

Heute für das CSS in den immergrünen Browsern ein leichtes Spiel: object-fit:cover bzw. object-fit:contain setzen den Bildausschnitt angepasst ein.

.thumbnail { width: 200px; height: 200px; overflow: hidden; } .thumbnail img { height: 200px; width: 100%; object-fit:cover; } .thumbnail img.portrait { width: 100%; height: auto; }

Bilder maskieren und freistellen

Dank des WebP-Formats können wir freigestellte Bilder ohne Hintergrund in höher Qualität in die Webseite setzen. Wir können Masken aber auch ähnlich wie in Bildbearbeitungsprogrammen mit Pfaden oder weichen Alpha-Masken auf der Webseite ohne Hintergrund anzeigen, und das Bild dabei intakt lassen – nicht-destruktiv.

CSS mask-image läßt sich animieren:

.pattern { mask-image: url("mask-image-circle.svg"); mask-size: 50%; mask-repeat: no-repeat; animation: position 10s infinite linear; } Panorama: München

Bilder mit SVG clipPath beschneiden

Eine letzte Alternative ist der SVG clipPath, der im Illustrationsprogramm unter Sichtkontrolle vorgefertigt werden kann.

Mehr zu SVG clipPath – Bilder und Grafik beschneiden und freistellen

img responsive – vertikal / horizontal anpassen

Fast immer sorgt width:100% zusammen mit height:auto dafür, dass sich Bilder an die Maße ihres Containers anpassen, ohne dabei das Seitenverhältnis anzutasten. Bilder im Landschafts-Format (breiter als hoch) bereiten keine Probleme, aber für Bilder im Hochformat funktioniert die Allround-Formel nicht.

.quad { display: flex; justify-content: center; align-items:center; } .quad img { max-height: 100%; max-width: 100%; width:auto; height:auto; }

Mehr zu Bilder für Webseiten

CSS img-rendering pixelated bzw. crisp-edges verhindert das Weichzeichnen von Grafiken bei Vergrößerungen und Verkleinerungen.
CSS filter grayscale, invert, blur, saturation – Effekte wie in der Bildbearbeitung.
SVG filter sind flexibel und mächtig, aber nur die einfachen Effekte sind intuitiv.
CSS und Vanilla Javascript – Thumbnail mit Spinner und Overlay

Externe Quellen

Fotos im Internet: sRGB oder AdobeRGB? Wer AdobeRGB fotografiert, kann AdobeRGB-Fotos beruhigt ins Internet setzen – aber muss das Profil des Bildes speichern.
Fotos für die Webseite optimieren und komprimieren Die Komprimierung von Fotos ist immer ein Balanceakt zwischen Dateigröße und Qualität des Fotos und funktioniert nur gut mit einem Schuß Pragmatismus.
Time-saving CSS techniques to create responsive images

Einführung in CSS

CSS Grundlagen
CSS einbinden: Datei, Import, style
@import-Regel: CSS-Datei in CSS laden
Überblick CSS Eigenschaften
CSS Konsole: Elemente und Stile untersuchen
Cascading – die CSS-Kaskade
Inheritance – Vererbung
!important Vorschlaghammer der Stylesheets
CSS vereinfachen: Kurzformen, Gruppen
Nesting CSS-Regeln verschachteln
@sope und :scope Stile modularisieren
CSS Reset, Normalize CSS
revert und unset CSS zurücksetzen / löschen
CSS optimieren: Tipps für effizientes CSS
supports-Regel Abfrage auf Browser-Unterstützung
Neu in CSS Die nächsten Schritte
CSS 2024 Was gibts Neues?
Browser-Präfix und Conditional Comments

Berechnen mit CSS

CSS Funktionen: Werte berechnen
calc Breite / Höhe berechnen
line-clamp • Zahl der Zeilen im Block
CSS counter • Zähler / Nummerieren
clamp(), min(), max()
CSS grid und clamp
CSS Variablen var() Custom Properties

Selektoren

Element-, class- und id-Selektoren
hover, visited, active, focus
:target interner Anker oder Sprungadresse
nth-child(n) Index, even/odd, Formel
CSS je nach Position des Elements im DOM
CSS :not() Selektor
:is() / where Selektoren zusammenfassen
CSS :has() Selektor Parent-Selektor
::before ::after content Pseudo-Elemente
first-letter, first-line, initial-letter – Drop Cap
CSS elem[] – Attribut-Selektoren
Kontext-Selektoren div p, div > p, div + p
h2 + p – Nachbar-Selektoren – Geschwister
:valid, :invalid Formularfelder
:hover aber kein :touch

Responsive Webseiten / mobile Geräte

Breakpoints – Schaltstellen des Layouts
Media Type Geräteklassen: Screen, Drucker
Media Queries Größe des Viewports
Container Queries Größe umfassenden Elements
Viewport Meta und CSS
Einfaches responsives Webdesign mit 3 Breakpoints
Bilder positionieren und zentrieren
CSS für Video im video-Tag / iframe
object-fit Bilder anpassen
iframe CSS

Animation: Transition, Keyframes

transform: Rotieren, Verzerren, Verschieben
Rotieren mit transform-origin: Ursprung der Transformation
Verschieben transform translate
Verkleinern, Vergrößern transform scale
transform perspective CSS goes 3D
Weiche Übergänge transition einfache Animationen
Kleine Beispiele für transition
CSS Transition und Animationen auslösen
CSS @keyframes Animationen
animation-delay Verzögerter Start der Animation
CSS Keyframes-Animationen mit Timeline
Animation Timing Function Easing
Animation Direction und Fill Mode
Animation Play State – Pause und weiter

Scrollen, Klicken, Wischen

overflow • Anzeige übergroße Inhalte
scroll-behaviour smooth – Weiches Scrollen
scroll-snap – präzises Scrollen und einrasten
scrollbar – Scrollleisten oder Rollbalken
touch action

CSS background und Verlauf

background • background-color
Dark Mode die dunkle Seite der Webseite
background-image – Hintergrundbild
Mehrere Hintergrundbilder
background-size
background-clip • Hintergrund beschneiden
background-position • Wo sitzt das Hintergrundbild?
background-repeat • steuert die Wiederholung
background-attachment scroll, fixed, local
background-image image-set – responsive Hintergrundbilder
linear-gradient • Verlauf als Hintergrund
radial-gradient • Kreisverlauf
conic-gradient • Konischer Verlauf

CSS color, Transparenz, Filter

CSS color • für Text, background, border und border-block
color HSL und HSLA
color Transparenz / Opacity und HSL-Farben
Hintergrund-Overlay backdrop-filter und ::backdrop
Farbrechner HSB zu HSL • und zu RGB / Hex
mixed-blend-mode Farben überblenden
text-shadow • Textschatten
text-stroke • Kontur, Outline
box-shadow • Box-Schlagschatten
CSS Filter • Effekte wie in der Bildbearbeitung
filter: Drop Shadow
img-rendering Bildqualität / Grafik

CSS Fonts

font • Kurzschrift
@font-face • Ladbare Schriften
font-family • Schriftfamilie
font-size • Schriftgröße
font-size em / rem / vw
font-style • Kursive Schrift
font-stretch • Dehnen und Stauchen
font-variant • Kapitälchen, Ziffern, Ligaturen
font-variant-numeric • Schreibweise von Zahlen
font-weight • Fette Schrift

Text gestalten

line-height • Zeilenhöhe
quotes • Anführungszeichen und Hochkommas
text-align • Text ausrichten
CSS text-columns • Spaltensatz
text-decoration • Links unterstreichen
text-indent Einziehen
text-overflow • Text kürzen
text-transform Großschreibung, Kleinschreibung
vertical-align • vertikal Ausrichten
white-space • Leerzeichen
word-spacing / letter-spacing
word-wrap Zeilenumbruch erzwingen
direction | unicode-bidi • Laufrichtung
writing-mode / text-orientation Text von oben nach unten

Position: Absolut, relativ, float

position Positionierung
position:absolute in position:relative
position: fixed
position: sticky
top right bottom left Platzieren
z-index Elemente überlagern
float Fließende Positionierung
clear float beenden

CSS Layout – display:flex, display:grid

display • block, inline, flex
display : contents
display : table CSS-Tabellen
display : list-item Icon oder Symbol voransetzen
display : flex Flexbox-Modell
flex shrink, grow, basis für Flex-Items
flex : order Reihenfolge der Flex-Items ändern
flex-direction: column, flex-basis für vertikale Verteilung
CSS Grid Begriffe und Beispiel
display: grid Grid-Container
Ausrichten im Grid-Raster
grid-template-areas Grid-Raster mit Namen
Grid repeat(), minmax()

Breite, Höhe und Clip (freistellen)

width height Breite und Höhe von Elementen
height Höhe von Layout-Blöcken
aspect-ratio Seitenverhältnis
resize Skalieren von Blöcken erlauben
min-height, max-height • Höhe begrenzen
min-width, max-width • Breite begrenzen
visibility Sichtbar / versteckt
mask-image Motive maskieren / freistellen
clip-path path() / url() Freiform
clip-path inset, polygon, circle, ellipse
CSS shape Text an Form / Kontur ausrichten
clip • Freistellen / Beschneiden (veraltet)

border, margin, padding

CSS Box-Modell
margin • äußerer Abstand
padding • innerer Abstand
border und border-block • Sichtbarer Rahmen
box-sizing Box-Modell intuitiv
border-image • Rahmen aus Bildern
border-radius • Abgerundete Ecken
outline • Extra-Rahmen

Formulare

input type checkbox / radio für Formularelemente
appearance für Formularelemente
CSS für Formulare input, textarea
Drag & Drop: input type file Datei-Upload
Formulare gestalten select, range, progress

Tabellen, Maus, Print

Responsive Tabellen
table border-collapse
table border-spacing • empty-cells
vertical-align • Text ausrichten in Tabellenzellen
CSS für Tabellen: table-layout, caption-side
cursor / Mauszeiger
paged media • CSS für den Druck
list-style Listen und Aufzählungen
list-style-image • Bilder für Listen
list-style-type • Listensymbole
list-style-position • Einzug von Listen

Từ khóa » Html Grafik Zentrieren