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.

Irgendwelche Ideen?

Weston Watson
quelle
3
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.

Andrew
quelle
16
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.

<div id="container" style="background-image:url(myimage.png)">
</div>

Und der Stil:

#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 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

conca
quelle
3
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.

img {
    max-width: 100%;
    height: auto;      
}
Adam Waite
quelle
1
Die Einstellung heightauf autobewirkt einen Reflow, wenn das Bild
schwebt
41

Einfache elegante Arbeitslösung:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
user3334941
quelle
3
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:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}
Flo
quelle
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.
Rehmat
9

Einfache Lösung:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

Übrigens, wenn Sie es in einem übergeordneten div-Container zentrieren möchten, können Sie diese CSS-Eigenschaften hinzufügen:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Es sollte wirklich wie erwartet funktionieren :)

Alexis K.
quelle
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.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

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.

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Beachten Sie, dass es einen schönen Schatten hat;)

Genießen Sie ein Live-Beispiel bei dieser Geige: http://jsfiddle.net/pligor/gx8qthqL/2/

George Pligoropoulos
quelle
Prost - genau das, wonach ich gesucht habe.
Eli
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.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}
Alejandro Salamanca Mazuelo
quelle
3

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).

width: 100%;
height: auto;
Davy
quelle
2

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.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />
bill davis
quelle
Gute und kluge Lösung! Mit den zusätzlichen 40% kompensieren Sie das Seitenverhältnis. Vielen Dank!
Sascha
Sie können background-size: contain;das Bild auch einfach in einen Hintergrund einfügen.
Simon G
1

Nicht in ein altes Thema zu springen, sondern ...

#container img {
      max-width:100%;
      height:auto !important;
}

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.

Levi G.
quelle
1

Heutzutage kann man verwenden , vwund vhEinheiten, die 1% des repräsentieren v iewport ist w reitet und h acht jeweils.

https://css-tricks.com/fun-viewport-units/

Also zum Beispiel:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... 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.

Jonas Berlin
quelle
0

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.

Ungesund
quelle
-2

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.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

Die digitale Evolution ist auf dem Weg.

Peter Gruppelaar
quelle