107

Ich habe seit einigen Tagen versucht, meine Miniaturbildgalerie so zu konfigurieren, dass alle Bilder dieselbe Höhe und Breite haben. Wenn ich jedoch den CSS-Code in ändere,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

Ich bekomme Bilder, die alle gleich groß sind, aber das Seitenverhältnis ist gestreckt, was die Bilder ruiniert. Gibt es keine Möglichkeit, die Größe des Bildcontainers und nicht des Bildes zu ändern? so dass ich das Seitenverhältnis behalten kann. Ändern Sie jedoch die Größe des Bildes. (Es macht mir nichts aus, wenn ich einen Teil des Bildes abschneide.)

Danke im Voraus!

— Beaniie
quelle

184

Dies ist ein bekanntes Problem bei der Größenänderung von CSS. Wenn nicht alle Bilder den gleichen Anteil haben, können Sie dies nicht über CSS tun.

Der beste Ansatz wäre, einen Container zu haben und die Größe einer der Dimensionen (immer gleich) der Bilder zu ändern. In meinem Beispiel habe ich die Breite geändert.

Wenn der Container eine bestimmte Abmessung hat (in meinem Beispiel die Breite), wird dem Bild die volle Breite des Containers zugewiesen, wenn die Breite 100% beträgt. Durch autodie Höhe des Bilds wird die Höhe proportional zur neuen Breite.

Ex:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

— JackJoe
quelle

41

Sie müssen eine Seite (z. B. Höhe) fixieren und die andere auf einstellen auto.

Z.B

 height: 120px;
 width: auto;

Das würde das Bild nur auf einer Seite skalieren. Wenn Sie das Zuschneiden des Bildes für akzeptabel halten, können Sie es einfach einstellen

overflow: hidden;

auf das übergeordnete Element, das alles ausschneiden würde, was sonst seine Größe überschreiten würde.

— Nick Andriopoulos
quelle

Ich habe es versucht, aber es gibt mir immer noch Bilder, die alle unterschiedliche Größen und Formen haben. Ich möchte, dass die Galerie so einheitlich ist, [] [] [] [] nicht wie [] [] [] [] []

— Beaniie

2

Verwenden Sie eine Kombination aus beiden oben genannten overflow: hidden

— Optionen: Stellen Sie

25

Sie können die object-fitcss3-Eigenschaft verwenden, so etwas wie

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

Erweitern Sie das Snippet

Es ist jedoch nicht genau Ihre Antwort, da es den Container nicht ausdehnt, sich aber wie die Galerie verhält und Sie das Styling imgselbst fortsetzen können.

Ein weiterer Nachteil dieser Lösung ist immer noch eine schlechte Unterstützung der css3-Eigenschaft. Weitere Details finden Sie hier: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . Dort finden Sie auch die jQuery-Lösung.

— dmitry_romanov
quelle

Danke, schöne Lösung. :)

— Bibhu

Es ist seltsam, mit einer Eigenschaft zu antworten, die nur in Opera atm unterstützt wird?! caniuse.com/object-fit

— Simon Dragsbæk

4

Ich verstehe deinen Standpunkt, @ Simon, danke. Ich erwähnte, dass ich keine Ahnung habe, ob die Eigenschaft überall unterstützt wird, aber selbst wenn dies nicht der Fall ist, können wir sie als Ausgangspunkt verwenden, um nach Alternativen zu suchen, die sie ersetzen. Ein weiterer Grund für das Posten ist, dass die Antwort einige Zeit bleiben würde, während die Browser mit jedem Tag besser werden. Deshalb habe ich auch auf diese Frage in naher Zukunft geantwortet .

— dmitry_romanov

1

Als ich einige Jahre später auf diese Seite kam, war ich froh, diese 'zukünftige' Antwort zu finden!

— Petzi

8

Um Bilder anpassbar / flexibel zu machen, können Sie Folgendes verwenden:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

— Stanislav
quelle

5

Legen Sie es als Hintergrund auf Ihren Halter, z

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

Dadurch wird Ihr Bild in einem 120x120-Div zentriert, der überschüssiges Bild abschneidet

— DickieBoy
quelle

2

Wenn Sie das Bild nicht dehnen möchten, passen Sie es ohne Überlauf in den div-Container ein und zentrieren Sie es, indem Sie den Rand bei Bedarf anpassen.

Das Bild wird nicht beschnitten
Das Seitenverhältnis bleibt ebenfalls gleich.

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

— Bhushan Dangore
quelle

-1

Wenn Sie das Spekt-Verhältnis kennen, können Sie den Polsterungsboden mit Prozentsatz verwenden, um die Höhe abhängig vom Diff einzustellen.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>

— reco
quelle

Bildgröße proportional mit CSS ändern?

HTML:

CSS: