CSS: 100% Breite oder Höhe unter Beibehaltung des Seitenverhältnisses?
174
Derzeit kann ich mit STYLE width: 100%und autoauf der Höhe (oder umgekehrt) verwenden, aber ich kann das Bild immer noch nicht auf eine bestimmte Position beschränken, entweder zu breit bzw. zu hoch.
Können Sie einen Link oder einen Screenshot veröffentlichen, um ein Beispiel für das Problem zu zeigen?
Mauro
Antworten:
137
Wenn Sie nur eine Dimension für ein Bild definieren, bleibt das Bildseitenverhältnis immer erhalten.
Ist das Problem, dass das Bild größer / größer ist als Sie bevorzugen?
Sie können es in einen DIV einfügen, der auf die maximale Höhe / Breite eingestellt ist, die Sie für das Bild wünschen, und dann den Überlauf festlegen: versteckt. Das würde alles beschneiden, was Sie wollen.
Wenn ein Bild 100% breit und hoch ist: auto und Sie denken, es ist zu groß, liegt dies insbesondere daran, dass das Seitenverhältnis beibehalten wird. Sie müssen zuschneiden oder das Seitenverhältnis ändern.
Bitte geben Sie weitere Informationen darüber an, was Sie speziell erreichen möchten, und ich werde versuchen, mehr zu helfen!
--- BEARBEITEN AUF DER BASIS VON FEEDBACK ---
Kennen Sie die Eigenschaften für maximale Breite und maximale Höhe ? Sie können diese stattdessen jederzeit festlegen. Wenn Sie kein Minimum festlegen und eine maximale Höhe und Breite festlegen, wird Ihr Bild nicht verzerrt (das Seitenverhältnis bleibt erhalten) und es wird nicht größer als die längste Dimension sein und die maximale Größe erreichen.
Wenn das Bild größer als breit ist, würde ich height = 100% und width = auto verwenden. Wenn das Bild breiter als hoch ist, würde ich width = 100%, height = auto verwenden. Ich weiß einfach nie, was der Fall ist? Das Zuschneiden nach maximaler Höhe / Breite würde funktionieren - aber wenn es einen Weg gibt, dies nicht zu tun, würde ich das lieber verwenden ...
Weston Watson
2
Entwerfen Sie ein flüssiges Layout oder ein Layout mit fester Breite? Wenn Sie sich in einem Layout mit fester Breite befinden, können Sie Ihre Breite immer auf 100% einstellen. Das Bild wird entsprechend skaliert, kann jedoch sehr groß sein. Versuchen Sie, ein Bild in einem Textblock zu positionieren oder als Banner oder Hintergrund zu verwenden? Wenn Sie die Seite anzeigen könnten, auf der Sie sie verwenden möchten, oder den Kontext beschreiben könnten, könnte ich Ihnen mehr helfen. Siehe auch die obigen Änderungen.
Andrew
Durch die Verwendung der maximalen Höhe für mein Bild konnte ich Bilder einschränken, während das Seitenverhältnis beibehalten wurde
nordamerikanischer
2
object-fitkeine Verwendung?
LeeGee
77
Einige Jahre später fand ich auf der Suche nach der gleichen Anforderung eine CSS-Option mit Hintergrundgröße.
Es soll in modernen Browsern (IE9 +) funktionieren.
#container{
width:100px;/*or 70%, or what you want*/
height:200px;/*or 70%, or what you want*/
background-size: cover;
background-position: center;
background-repeat:no-repeat;}
Die ideale Lösung, die von IE8 leider nicht unterstützt wird :(
Japrescott
Dies ist die ideale Lösung. Wenn Sie dies jedoch in Karussells tun, werden die Bilder nach jeder Folie für eine Sekunde leer.
Kloddant
58
Wenn Sie die CSS- max-widthEigenschaft auf 100%festlegen, füllt ein Bild die Breite des übergeordneten Elements, wird jedoch nicht größer als die tatsächliche Größe gerendert, wodurch die Auflösung erhalten bleibt.
Wenn Sie die heightEigenschaft so einstellen , autodass das Seitenverhältnis des Bildes beibehalten wird, können Sie mit dieser Technik die statische Höhe überschreiben und das Bild proportional in alle Richtungen biegen.
Danke, dass du mich daran erinnert hast object-fit. Genau das, was ich brauchte.
Ash Clarke
5
Dies ist eine ideale Lösung, wird aber leider object-fitin keiner Version von IE oder Edge ab dem 28. März 2017 unterstützt.
Simon G
2
Ab März 2019 wird diese Funktion zu 90% unterstützt - dies sollte also wirklich als die richtige Antwort angesehen werden.
Hampus Ahlgren
object-fit: containobject-fit: coverwidthpx
Beachten
Ich habe es object-fitmit max-widthund max-heightwie in anderen Antworten versucht , aber das hat nicht funktioniert. Dies funktioniert perfekt für zufällige Bildgrößen, auch mit widthundheight 100%
Halfacht
27
Hatte das gleiche Problem. Das Problem für mich war, dass die height-Eigenschaft auch bereits an anderer Stelle definiert wurde und wie folgt behoben wurde:
Genau das, wonach ich gesucht habe. Vielen Dank, eine Million Kerl.
London Smith
Perfekt, wenn die Bildgröße kleiner oder größer als das übergeordnete Div sein kann und die Größe in die perfekte Mitte mit maximaler Breite ODER maximaler Höhe geändert wird. Sie müssen kein Bild als Hintergrund verwenden, der das übergeordnete Element nur überfüllt, wenn es auf "Abdeckung" eingestellt ist.
hat den ersten Teil positiv bewertet. Der zweite Teil hat bei mir nicht funktioniert ... :(
Vikas Bansal
Nur ein Problem: Wenn das Bild größer als 100% des Containers ist, wird es verschüttet und erfordert Bildlaufleisten oder Zuschneiden. Ich bin mir nicht sicher, wie ich das gleiche erreichen und trotzdem die maximale Größe auf den Container beschränken soll. Wenn Sie die maximale Breite und Höhe einstellen, wird das Seitenverhältnis nicht mehr beibehalten.
JustAMartin
5
Eine der Antworten beinhaltet die Hintergrundgröße: Enthält eine CSS-Anweisung, die mir sehr gefällt, da es sich um eine einfache Anweisung handelt, was Sie tun möchten, und der Browser dies einfach tut.
Leider müssen Sie früher oder später einen Schatten anwenden, der mit Hintergrundbildlösungen leider nicht gut funktioniert.
Nehmen wir also an, Sie haben einen Container, der reagiert, aber genau definierte Grenzen für die minimale und maximale Breite und Höhe hat.
Und der Container hat ein Bild, das die Pixel der Höhe des Containers berücksichtigen muss, um zu vermeiden, dass ein sehr hohes Bild entsteht, das überläuft oder beschnitten wird.
Das Bild sollte auch eine maximale Breite von 100% definieren, damit erstens kleinere Breiten gerendert werden können und zweitens prozentual, was es parametrisch macht.
Vielen Dank für diese Lösungen und jsdfiddle Link. Dies funktionierte tatsächlich für meine React-Image-Galerie, in der ich beide verwende: Bilder mit größerer Höhe und Bilder mit größerer Breite. :)
Eugenijus S.
4
Ich benutze dies für einen rechteckigen Behälter mit fester Höhe und Breite, aber mit Bildern unterschiedlicher Größe.
Verwenden Sie am besten Auto für die Dimension, die das Seitenverhältnis berücksichtigen soll. Wenn Sie die andere Eigenschaft nicht auf auto setzen, gehen die meisten Browser heutzutage davon aus, dass Sie die Aspektration berücksichtigen möchten, jedoch nicht alle (IE10 unter Windows Phone 8 beispielsweise nicht).
Dies ist eine sehr einfache Lösung, die ich gefunden habe, nachdem ich dem Link von conca gefolgt und mir die Hintergrundgröße angesehen habe. Es bläst das Bild in die Luft und passt es dann zentriert in den äußeren Behälter, ohne es zu skalieren.
Auch wenn dies nicht richtig ist, da Sie die! Wichtige Überschreibung für die Höhe verwenden, funktioniert dies gut, wenn Sie ein CMS wie WordPress verwenden, das die Höhe und Breite für Sie festlegt.
... macht das Bild so breit wie möglich, wobei das Seitenverhältnis beibehalten wird, ohne jedoch breiter oder höher als 100% des Ansichtsfensters zu sein.
Verwenden Sie JQuery oder so, da CSS ein allgemeines Missverständnis ist (die unzähligen Fragen und Diskussionen hier über einfache Entwurfsziele zeigen dies).
Mit CSS ist es nicht möglich, das zu tun, was Sie zu wünschen scheinen: Das Bild muss eine Breite von 100% haben. Wenn diese Breite jedoch zu einer zu großen Höhe führt, gilt eine maximale Höhe - und natürlich die richtigen Proportionen konserviert.
Ich denke, das ist es, wonach du gesucht hast, ich habe es selbst gesucht, aber dann habe ich mich wieder daran erinnert, bevor ich den Code gefunden habe.
Antworten:
Wenn Sie nur eine Dimension für ein Bild definieren, bleibt das Bildseitenverhältnis immer erhalten.
Ist das Problem, dass das Bild größer / größer ist als Sie bevorzugen?
Sie können es in einen DIV einfügen, der auf die maximale Höhe / Breite eingestellt ist, die Sie für das Bild wünschen, und dann den Überlauf festlegen: versteckt. Das würde alles beschneiden, was Sie wollen.
Wenn ein Bild 100% breit und hoch ist: auto und Sie denken, es ist zu groß, liegt dies insbesondere daran, dass das Seitenverhältnis beibehalten wird. Sie müssen zuschneiden oder das Seitenverhältnis ändern.
Bitte geben Sie weitere Informationen darüber an, was Sie speziell erreichen möchten, und ich werde versuchen, mehr zu helfen!
--- BEARBEITEN AUF DER BASIS VON FEEDBACK ---
Kennen Sie die Eigenschaften für maximale Breite und maximale Höhe ? Sie können diese stattdessen jederzeit festlegen. Wenn Sie kein Minimum festlegen und eine maximale Höhe und Breite festlegen, wird Ihr Bild nicht verzerrt (das Seitenverhältnis bleibt erhalten) und es wird nicht größer als die längste Dimension sein und die maximale Größe erreichen.
quelle
object-fit
keine Verwendung?Einige Jahre später fand ich auf der Suche nach der gleichen Anforderung eine CSS-Option mit Hintergrundgröße.
Es soll in modernen Browsern (IE9 +) funktionieren.
Und der Stil:
Die Referenz: http://www.w3schools.com/cssref/css3_pr_background-size.asp
Und die Demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size
quelle
Wenn Sie die CSS-
max-width
Eigenschaft auf100%
festlegen, füllt ein Bild die Breite des übergeordneten Elements, wird jedoch nicht größer als die tatsächliche Größe gerendert, wodurch die Auflösung erhalten bleibt.Wenn Sie die
height
Eigenschaft so einstellen ,auto
dass das Seitenverhältnis des Bildes beibehalten wird, können Sie mit dieser Technik die statische Höhe überschreiben und das Bild proportional in alle Richtungen biegen.quelle
height
aufauto
bewirkt einen Reflow, wenn das BildEinfache elegante Arbeitslösung:
quelle
object-fit
. Genau das, was ich brauchte.object-fit
in keiner Version von IE oder Edge ab dem 28. März 2017 unterstützt.object-fit: contain
object-fit: cover
width
px
object-fit
mitmax-width
undmax-height
wie in anderen Antworten versucht , aber das hat nicht funktioniert. Dies funktioniert perfekt für zufällige Bildgrößen, auch mitwidth
undheight 100%
Hatte das gleiche Problem. Das Problem für mich war, dass die height-Eigenschaft auch bereits an anderer Stelle definiert wurde und wie folgt behoben wurde:
quelle
Einfache Lösung:
Übrigens, wenn Sie es in einem übergeordneten div-Container zentrieren möchten, können Sie diese CSS-Eigenschaften hinzufügen:
Es sollte wirklich wie erwartet funktionieren :)
quelle
Eine der Antworten beinhaltet die Hintergrundgröße: Enthält eine CSS-Anweisung, die mir sehr gefällt, da es sich um eine einfache Anweisung handelt, was Sie tun möchten, und der Browser dies einfach tut.
Leider müssen Sie früher oder später einen Schatten anwenden, der mit Hintergrundbildlösungen leider nicht gut funktioniert.
Nehmen wir also an, Sie haben einen Container, der reagiert, aber genau definierte Grenzen für die minimale und maximale Breite und Höhe hat.
Und der Container hat ein Bild, das die Pixel der Höhe des Containers berücksichtigen muss, um zu vermeiden, dass ein sehr hohes Bild entsteht, das überläuft oder beschnitten wird.
Das Bild sollte auch eine maximale Breite von 100% definieren, damit erstens kleinere Breiten gerendert werden können und zweitens prozentual, was es parametrisch macht.
Beachten Sie, dass es einen schönen Schatten hat;)
Genießen Sie ein Live-Beispiel bei dieser Geige: http://jsfiddle.net/pligor/gx8qthqL/2/
quelle
Ich benutze dies für einen rechteckigen Behälter mit fester Höhe und Breite, aber mit Bildern unterschiedlicher Größe.
quelle
Verwenden Sie am besten Auto für die Dimension, die das Seitenverhältnis berücksichtigen soll. Wenn Sie die andere Eigenschaft nicht auf auto setzen, gehen die meisten Browser heutzutage davon aus, dass Sie die Aspektration berücksichtigen möchten, jedoch nicht alle (IE10 unter Windows Phone 8 beispielsweise nicht).
quelle
Dies ist eine sehr einfache Lösung, die ich gefunden habe, nachdem ich dem Link von conca gefolgt und mir die Hintergrundgröße angesehen habe. Es bläst das Bild in die Luft und passt es dann zentriert in den äußeren Behälter, ohne es zu skalieren.
quelle
background-size: contain;
das Bild auch einfach in einen Hintergrund einfügen.Nicht in ein altes Thema zu springen, sondern ...
Auch wenn dies nicht richtig ist, da Sie die! Wichtige Überschreibung für die Höhe verwenden, funktioniert dies gut, wenn Sie ein CMS wie WordPress verwenden, das die Höhe und Breite für Sie festlegt.
quelle
Heutzutage kann man verwenden ,
vw
undvh
Einheiten, die 1% des repräsentieren v iewport ist w reitet und h acht jeweils.https://css-tricks.com/fun-viewport-units/
Also zum Beispiel:
... macht das Bild so breit wie möglich, wobei das Seitenverhältnis beibehalten wird, ohne jedoch breiter oder höher als 100% des Ansichtsfensters zu sein.
quelle
Verwenden Sie JQuery oder so, da CSS ein allgemeines Missverständnis ist (die unzähligen Fragen und Diskussionen hier über einfache Entwurfsziele zeigen dies).
Mit CSS ist es nicht möglich, das zu tun, was Sie zu wünschen scheinen: Das Bild muss eine Breite von 100% haben. Wenn diese Breite jedoch zu einer zu großen Höhe führt, gilt eine maximale Höhe - und natürlich die richtigen Proportionen konserviert.
quelle
Ich denke, das ist es, wonach du gesucht hast, ich habe es selbst gesucht, aber dann habe ich mich wieder daran erinnert, bevor ich den Code gefunden habe.
Die digitale Evolution ist auf dem Weg.
quelle