Machen Sie eine Bildbreite 100% des übergeordneten Div, aber nicht größer als die eigene Breite

Ich versuche, ein Bild (dynamisch platziert, ohne Einschränkungen für die Abmessungen) so breit wie das übergeordnete Div zu machen, aber nur solange diese Breite nicht breiter als die eigene Breite bei 100% ist. Ich habe es ohne Erfolg versucht:

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

Viele dieser Bilder sind viel breiter als ihre übergeordneten Divs, weshalb ich möchte, dass sie die Größe entsprechend ändern. Wenn jedoch ein kleines Bild dort auftaucht und über seine normalen Abmessungen hinaus vergrößert wird, sieht es wirklich schrecklich aus. Gibt es eine Möglichkeit, dies zu tun?

Geben Sie einfach max-width: 100%alleine an, das sollte es tun.

Ich habe diesen Beitrag in einer Google-Suche gefunden und mein Problem dank der Antwort von @jwal gelöst, aber ich habe eine Ergänzung zu seiner Lösung vorgenommen.

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

Mit den obigen Angaben habe ich die maximale Breite in die Abmessungen des Inhaltscontainers geändert, in dem sich mein Bild befindet. In diesem Fall ist dies: Containerbreite - Polsterung - Grenze = maximale Breite

Auf diese Weise bricht mein Bild nicht aus dem enthaltenen div aus, und ich kann das Bild trotzdem innerhalb des Inhalts div schweben lassen.

Ich habe in IE 9, FireFox 18.0.2 und Chrome 25.0.1364.97, Safari iOS getestet und scheint zu funktionieren.

Zusätzlich: Ich habe dies an einem Bild mit einer Breite von 1024 Pixel und einer Breite von 678 Pixel (der maximalen Breite) und einem Bild mit einer Breite von 500 Pixel mit einer Breite von 500 Pixel (Breite des Bildes) getestet.

Das Einstellen einer Breite von 100% entspricht der vollen Breite des Divs, in dem es sich befindet, und nicht dem Originalbild in voller Größe. Ohne JavaScript oder eine andere Skriptsprache, mit der das Bild gemessen werden kann, ist dies nicht möglich. Wenn Sie eine feste Breite oder Höhe des Div haben können (z. B. 200 Pixel breit), sollte es nicht zu schwierig sein, dem Bild einen Bereich zum Füllen zu geben. Wenn Sie jedoch ein 20 x 20 Pixel großes Bild in eine 200 x 300 Pixel große Box legen, wird es dennoch verzerrt.

Im Linienstil - das funktioniert bei mir jedes Mal

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

Sie sollten die maximale Breite einstellen und wenn Sie möchten, können Sie auch eine Polsterung an einer der Seiten einstellen. In meinem Fall war die maximale Breite: 100% gut, aber das Bild befand sich direkt neben dem Ende des Bildschirms.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

Ich hatte auch das gleiche Problem, aber ich habe den Höhenwert in meinem CSS auf auto gesetzt und das hat mein Problem behoben. Vergessen Sie auch nicht, die Anzeigeeigenschaft auszuführen.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

Ich habe eine Antwort gefunden, die für mich funktioniert hat und unter folgendem Link zu finden ist:

Container mit voller Breite bei Eltern mit begrenzter Breite

Wenn das Bild kleiner als das übergeordnete ist ...

.img_100 {
  width: 100%;
}

Ich würde das Grundstück nutzen display: table-cell

Hier ist der Link