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

125

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?

Alfonso
quelle
5
Was passiert, wenn Sie nur angeben max-width: 100%?
Fjodor Soikin
@Fyodor Soikin - Gib das als Antwort und ich werde für dich stimmen.
Gert Grenander
Es wäre jedoch gut zu überlegen, welche Browser die maximale Breite unterstützen.
Kbrimington
kbrimington bringt einen guten Punkt auf den Tisch. Laut reference.sitepoint.com/css/max-width#compatibilitysection ist die Implementierung von IE8 fehlerhaft.
Alfonso

Antworten:

221

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

Fjodor Soikin
quelle
1
Chrom scheint es einfach zu 100% zu belassen, unabhängig vom Kontext. Vielleicht sollte ich aufhören, mich ständig mit meiner Arbeit an Beta-Software zu beschäftigen. Danke dir!
Alfonso
Wie geht das ohne max-width: 100%? In React-Native können keine Prozentsätze verwendet werden.
Croolsby
@Croolsby Sie können Prozentsatz in React-Native verwenden, aber mit String-Wert, wie dieser '100%'
Rafael Hovsepyan
9

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.

Mattauckland
quelle
1
Durch die Verwendung wurde width:auto !important;ein Problem in IE11 behoben, bei dem das Bild größer als der Container war und IE11 das Bild nicht verkleinerte. Wenn Sie dies in der imgAuswahl festlegen, wird das Problem in IE11 behoben. Das Einstellen width:100%;ohne die andere Regel hat jedoch in IE11 nichts bewirkt. Die "Überschreibung" muss also enthalten sein, damit das Bild auf die Größe seines Containers verkleinert werden kann.
Lowtechsun
3

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.

Amanda
quelle
1
Bitte geben Sie nach Möglichkeit ein Arbeitsbeispiel an. Dies wird empfohlen. :)
bhb
1

Im Linienstil - das funktioniert bei mir jedes Mal

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

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*/
Kombinieren
quelle
0

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;
 }  
Noah Franco
quelle
Nur zu Ihrer Information. Sie können die Höhe: auto und die Breite: auto entfernen. Die maximale Höhe und maximale Breite ist dasselbe.
Debbie Kurth
-1

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

.img_100 {
  width: 100%;
}
SandroMarques
quelle
-4

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

Hier ist der Link

allsyed
quelle