Ich arbeite mit Bildern und bin auf ein Problem mit Seitenverhältnissen gestoßen.
<img src="big_image.jpg" width="900" height="600" alt="" />
Wie Sie sehen können height
und width
bereits angegeben sind. Ich habe die CSS-Regel für Bilder hinzugefügt:
img {
max-width:500px;
}
Aber dafür big_image.jpg
erhalte ich width=500
und height=600
. Wie ich Bilder so einstellen kann, dass sie in der Größe angepasst werden, während ihre Seitenverhältnisse beibehalten werden.
css
image
aspect-ratio
Moonvader
quelle
quelle
<img>
, die selbst eine Breite und Höhe enthält. Ich denke, dies bedeutet, dass Sie die!important
Informationen zur Breite / Höhe des Tags verwenden müssen.!important
wird nicht gebraucht.Ich habe ziemlich hart mit diesem Problem gekämpft und bin schließlich zu dieser einfachen Lösung gekommen:
Sie können die Breite und Höhe an Ihre Bedürfnisse anpassen, und die Objektanpassungseigenschaft übernimmt das Zuschneiden für Sie.
Prost.
quelle
object-fit
ist fantastisch, toller Tipp! Es gibt einige feine Polyfill-Bibliotheken, wenn sich jemand über die IE-Kompatibilität wundert.object-fit: contain
eine Breite oder Höhe verwenden und angeben!Mit den folgenden Lösungen können Sie das Bild abhängig von der Breite des übergeordneten Felds vergrößern und verkleinern .
Alle Bilder haben einen übergeordneten Container mit einer festen Breite, der nur zu Demonstrationszwecken dient . In der Produktion ist dies die Breite der übergeordneten Box.
Best Practice (2018):
Diese Lösung weist den Browser an, das Bild mit der maximal verfügbaren Breite zu rendern und die Höhe als Prozentsatz dieser Breite anzupassen.
Ausgefallenere Lösung:
Mit der schickeren Lösung können Sie das Bild unabhängig von seiner Größe zuschneiden und eine Hintergrundfarbe hinzufügen, um das Zuschneiden zu kompensieren.
Für die linienspezifizierende Auffüllung müssen Sie das Seitenverhältnis des Bildes berechnen, zum Beispiel:
Top Padding = 34,37%.
quelle
!important
hier gebraucht wird.Die Eigenschaft für die Hintergrundgröße ist nur> = 9, aber wenn das für Sie in Ordnung ist, können Sie ein div mit verwenden
background-image
und Folgendes festlegenbackground-size: contain
:Jetzt können Sie einfach Ihre Div-Größe auf das einstellen, was Sie möchten, und das Bild behält nicht nur sein Seitenverhältnis bei, sondern wird auch vertikal und horizontal innerhalb des Div zentralisiert. Vergessen Sie nur nicht, die Größen auf dem CSS festzulegen, da divs nicht das Attribut width / height für das Tag selbst haben.
Dieser Ansatz unterscheidet sich von der Antwort von setecs. Wenn Sie dies verwenden, wird der Bildbereich von Ihnen konstant und definiert (wobei je nach Div-Größe und Bildseitenverhältnis leere Räume entweder horizontal oder vertikal verbleiben), während bei der Antwort von setecs eine Box angezeigt wird, die genau der entspricht Größe des skalierten Bildes (ohne Leerzeichen).
Bearbeiten: Gemäß der MDN-Dokumentation zur Hintergrundgröße können Sie die Eigenschaft zur Hintergrundgröße in IE8 mithilfe einer proprietären Filterdeklaration simulieren:
quelle
Sehr ähnlich zu einigen Antworten hier, aber in meinem Fall hatte ich Bilder, die manchmal größer, manchmal größer waren.
Dieser Stil wirkte wie ein Zauber, um sicherzustellen, dass alle Bilder den gesamten verfügbaren Platz nutzen, das Verhältnis beibehalten und keine Schnitte:
quelle
object-fit
funktioniert bei mir funktioniert es in allen browser?.img
eine Klasse auf dem übergeordneten oder dem Bild? Könnten Sie eine jsfiddle mit Beispiel für Hoch- und Querformat machen?Entfernen Sie die Eigenschaft "height".
Indem Sie beide angeben, ändern Sie das Seitenverhältnis des Bildes. Wenn Sie nur eine festlegen, wird die Größe geändert, das Seitenverhältnis bleibt jedoch erhalten.
Optional, um Übergrößen einzuschränken:
quelle
height
Attributs imimg
Tag besteht darin, dass der Browser vor dem Herunterladen des Bildes nicht berechnen kann, wie viel Speicherplatz das Bild beansprucht. Dies verlangsamt das Rendern der Seite und kann zu mehr "Springen" führen.Fügen Sie dies einfach Ihrem CSS hinzu. Es wird automatisch verkleinert und erweitert, wobei das ursprüngliche Verhältnis beibehalten wird.
quelle
100%
anstelle eines bestimmten Pixelwerts verwendet wird.display: block;
ist unnötig.Es gibt keine Standardmethode Seitenverhältnis für Bilder mit zu erhalten
width
,height
undmax-width
spezifizierte zusammen.Daher sind wir gezwungen, beim Laden von Bildern entweder Seitensprünge anzugeben
width
undheight
zu verhindern odermax-width
Dimensionen für Bilder zu verwenden und nicht anzugeben.Nur
width
(ohneheight
) anzugeben ist normalerweise nicht sehr sinnvoll, aber Sie können versuchen, dasheight
HTML-Attribut zu überschreiben, indem Sie eine Regel wieIMG {height: auto; }
in Ihr Stylesheet einfügen.Siehe auch den zugehörigen Firefox- Fehler 392261 .
quelle
!important
in CSS verwenden. Es ist ein Hack, der irgendwann zurückkommt, um dich zu verfolgen.!important
hier nicht einmal .Hier ist eine Lösung:
Dadurch wird sichergestellt, dass das Bild immer das gesamte übergeordnete Element abdeckt (verkleinert und vergrößert) und das gleiche Seitenverhältnis beibehält.
quelle
Setzen Sie die CSS-Klasse Ihres Bildcontainer-Tags auf
image-class
:und fügen Sie dies Ihrem CSS-Stylesheet hinzu.
quelle
Um ein ansprechendes Bild beizubehalten und gleichzeitig das Bild auf ein bestimmtes Seitenverhältnis zu bringen, können Sie Folgendes tun:
HTML:
Und SCSS:
Dies kann verwendet werden, um ein bestimmtes Seitenverhältnis zu erzwingen, unabhängig von der Größe des Bildes, das die Autoren hochladen.
Vielen Dank an @Kseso unter http://codepen.io/Kseso/pen/bfdhg . Überprüfen Sie diese URL auf weitere Verhältnisse und ein funktionierendes Beispiel.
quelle
border-radius
. Aber leider beschneidet es das Bild und macht es nicht so gut, einen Rand für das Bild in der Div zu erstellen, soweit ich es versucht habe.Um ein Bild zu erzwingen, das in eine exakte Größe passt, müssen Sie nicht zu viele Codes schreiben. Es ist so einfach
quelle
https://jsfiddle.net/sot2qgj6/3/
Hier ist die Antwort, wenn Sie ein Bild mit einem festen Prozentsatz der Breite , aber nicht mit einem festen Pixel der Breite einfügen möchten .
Dies ist hilfreich, wenn Sie mit unterschiedlichen Bildschirmgrößen arbeiten .
Die Tricks sind
padding-top
, um die Höhe von der Breite einzustellen.position: absolute
diese Option , um das Bild in den Auffüllbereich einzufügen.max-height and max-width
diese Option , um sicherzustellen, dass das Bild nicht über dem übergeordneten Element angezeigt wird.display:block and margin: auto
um das Bild zu zentrieren.Ich habe auch die meisten Tricks in der Geige kommentiert.
Ich finde auch einige andere Wege, um dies zu erreichen. Es wird kein echtes Bild in HTML geben, daher stelle ich die Top-Antwort persönlich vor, wenn ich ein "img" -Element in HTML benötige.
einfaches CSS unter Verwendung des Hintergrunds http://jsfiddle.net/4660s79h/2/
Hintergrundbild mit Wort oben http://jsfiddle.net/4660s79h/1/
Das Konzept zur Verwendung von Position Absolue ist von hier http://www.w3schools.com/howto/howto_css_aspect_ratio.asp
quelle
Sie können dies verwenden:
quelle
Sie können ein div wie folgt erstellen:
Und verwenden Sie dieses CSS, um es zu stylen:
quelle
Ich würde für einen reaktionsschnellen Ansatz vorschlagen, dass die besten Vorgehensweisen darin bestehen, die Viewport-Einheiten und die Min / Max-Attribute wie folgt zu verwenden:
quelle
Dadurch wird das Bild verkleinert, wenn es für den angegebenen Bereich zu groß ist (als Nachteil wird das Bild nicht vergrößert).
Die Lösung von setec ist in Ordnung für "Shrink to Fit" im Auto-Modus. Um sich jedoch optimal zu erweitern, um in den 'Auto'-Modus zu passen, müssen Sie zuerst das empfangene Bild in eine temporäre ID versetzen. Überprüfen Sie, ob es in Höhe oder Breite erweitert werden kann (abhängig von seinem Seitenverhältnis v / s des Seitenverhältnisses von Ihr Anzeigeblock),
Dieser Ansatz ist nützlich, wenn empfangene Bilder kleiner als das Anzeigefeld sind. Sie müssen sie auf Ihrem Server in Original Small Size anstatt in ihrer erweiterten Version speichern, um Ihre Big Display Display Box zu füllen und Größe und Bandbreite zu sparen.
quelle
quelle
Wie wäre es mit einem Pseudoelement für die vertikale Ausrichtung? Dieser weniger Code ist für ein Karussell, aber ich denke, er funktioniert auf jedem Container mit fester Größe. Das Seitenverhältnis wird beibehalten und @ grau-dunkle Balken oben / unten oder links / schreiben für die kürzeste Dimension eingefügt. In der Zwischenzeit wird das Bild horizontal durch die Textausrichtung und vertikal durch das Pseudoelement zentriert.
quelle
Vollbilddarstellung:
Beachten Sie, dass sich das Bild im Verhältnis zum Unterschied natürlich verschlechtert, wenn die Höhe des Ansichtsfensters größer als das Bild ist.
quelle
Ich denke schließlich, dass dies die beste Lösung ist, einfach und unkompliziert :
quelle