wake-up-neo.com

CSS: 100% Breite oder Höhe unter Beibehaltung des Seitenverhältnisses?

Derzeit kann ich mit STYLE width: 100% und auto auf der Höhe (oder umgekehrt), aber ich kann das Bild immer noch nicht auf eine bestimmte Position beschränken, entweder zu breit oder zu hoch.

Irgendwelche Ideen?

158
Weston Watson

Wenn Sie nur eine Dimension in einem Bild definieren, bleibt das Bildseitenverhältnis immer erhalten.

Ist das Problem, dass das Bild größer/höher ist, als Sie bevorzugen?

Sie könnten es in einen DIV legen, der auf die maximale Höhe/Breite eingestellt ist, die Sie für das Bild wünschen, und dann Überlauf einstellen: ausgeblendet. Das würde alles beschneiden, was Sie wollen.

Wenn ein Bild zu 100% breit und hoch ist: auto und Sie denken, es ist zu hoch, 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, was Sie speziell erreichen möchten, und ich werde versuchen, Ihnen weiterzuhelfen!

--- NACH FEEDBACK BEARBEITEN ---

Kennen Sie die Eigenschaften max-width und max-height ? Sie könnten diese stattdessen immer einstellen. Wenn Sie kein Minimum 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 und die maximale Breite.

127
Andrew

Einige Jahre später habe ich auf der Suche nach der gleichen Anforderung eine CSS-Option mit Hintergrundgröße gefunden.

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

73
conca

Durch Setzen des CSS max-width Eigentum an 100%, ein Bild füllt die Breite des übergeordneten Elements aus, wird jedoch nicht größer als die tatsächliche Größe gerendert, wodurch die Auflösung erhalten bleibt.

Wenn Sie die Eigenschaft height auf auto setzen, wird das Seitenverhältnis des Bildes beibehalten. Mit dieser Technik kann die statische Höhe überschrieben und das Bild proportional in alle Richtungen gebogen werden.

img {
    max-width: 100%;
    height: auto;      
}
56
Adam Waite

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%);
}
26
user3334941

Hatte das gleiche Problem. Das Problem für mich war, dass die height -Eigenschaft auch schon an anderer Stelle definiert war und so behoben wurde:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}
22
Flo

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

8
Alexis K

Eine der Antworten beinhaltet die background-size: contain css-Anweisung, die mir sehr gut gefällt, weil sie eine einfache Aussage darüber ist, was Sie tun möchten, und der Browser tut es einfach.

Leider müssen Sie früher oder später einen Schatten auftragen, der mit Hintergrundbildlösungen leider nicht gut funktioniert.

Nehmen wir also an, Sie haben einen Container, der anspricht , 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 überläuft oder beschnitten wird.

Das Bild sollte auch eine maximale Breite von 100% definieren, damit erstens kleinere Breiten gerendert und zweitens prozentual berechnet werden können, wodurch es parametrisch wird.

.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 Fiedel: http://jsfiddle.net/pligor/gx8qthqL/2/

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;
}

Am besten verwenden Sie auto für die Bemaßung, 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 das Seitenverhältnis respektieren möchten, jedoch nicht alle (z. B. IE10 unter Windows Phone 8 nicht).

width: 100%;
height: auto;
3
Davy

Dies ist eine sehr einfache Lösung, die ich gefunden habe, nachdem ich dem Link von Conca gefolgt und die Hintergrundgröße betrachtet habe. Es vergrößert das Bild und passt es dann zentriert in den äußeren Container, ohne ihn 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); />
2
bill davis

Nicht in eine alte Frage zu springen, aber ...

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

Auch wenn dies nicht richtig ist, da Sie den! Important-Override 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.

1
Levi G

Verwenden Sie JQuery oder so, da CSS ein allgemeines Missverständnis ist (die unzähligen Fragen und Diskussionen hier über einfache Designziele zeigen dies).

Mit CSS ist es nicht möglich, das zu tun, was Sie sich wünschen: Das Bild soll eine Breite von 100% haben, aber wenn diese Breite eine zu große Höhe ergibt, gilt eine maximale Höhe - und natürlich die richtigen Proportionen konserviert.

0
Ungesund