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

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?

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.

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

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

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

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

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

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/

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

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;

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); />

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.

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.

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.

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

Die digitale Evolution ist auf dem Weg.