Wie kann ich alle Bilder unterschiedlicher Höhe und Breite über CSS gleich machen?

89

Ich versuche eine Bildwand zu erstellen, die aus Produktfotos besteht. Leider haben alle unterschiedliche Höhe und Breite. Wie kann ich CSS verwenden, um alle Bilder gleich groß aussehen zu lassen? vorzugsweise 100 x 100.

Ich dachte daran, ein Div zu machen, das eine Höhe und Breite von 100px hat, und dann ein bisschen, wie man es auffüllt. Ich bin mir nicht sicher, wie ich das machen soll.

Wie kann ich das erreichen?

Ariel
quelle
1
Machen Sie die Divs auf eine feste Höhe / Breite, füllen Sie die Bilder mit einem ein overflow:noneund zentrieren Sie das Bild horizontal / vertikal innerhalb des Divs.
Marc B
2
@MarcB Ich denke du meinst overflow: hidden;. :)
insertusernamehere
1
@MarcB gibt es keine solche overflow:nonein CSS. Auch overflow:hiddenwird das Problem nicht lösen.
Rajesh Paul

Antworten:

174

Aktualisierte Antwort (keine IE11-Unterstützung)

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}
<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

Ursprüngliche Antwort

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

Simon Arnold
quelle
2
tolle Antwort! funktioniert auch für Bibliotheken wie Angular und Vue, wenn Sie einen Benutzer-Repeater verwenden möchten!
Matt Catellier
1
Die Verwendung von div anstelle von img könnte Auswirkungen auf das SEO haben (nicht sicher)
Muhammad Ali Mansoor
@ MuhammadAliMansoor könnte es sein, wenn Sie nicht mit Mikrotadaten kompensieren. Ich habe meine Antwort aktualisiert, um das gleiche Ergebnis mit img-Tags und Objektanpassung zu erzielen, die jetzt eine gute Unterstützung bietet.
Simon Arnold
1
Warum zum Teufel ist das nicht alles über das Internet? Es funktioniert sogar mit% widths!
Liz
33

Kann ich das einfach einwerfen, wenn Sie Ihre Bilder zu stark verzerren, dh aus einem Verhältnis herausnehmen, sehen sie möglicherweise nicht richtig aus - eine winzige Menge ist in Ordnung, aber eine Möglichkeit, dies zu tun, besteht darin, die Bilder in einen "Container" zu legen. und stellen Sie den Container auf 100 x 100 ein, stellen Sie dann Ihr Bild so ein, dass es nicht überläuft, und stellen Sie die kleinste Breite auf die maximale Breite des Containers ein. Dadurch wird jedoch ein Teil Ihres Bildes zugeschnitten.

zum Beispiel

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="ipod.jpg" alt="iPod" />
    </li>
</ul>



.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

Auf diese Weise behält das Bild die Größe seines Containers bei, ändert jedoch die Größe, ohne die Einschränkungen zu überschreiten

Andi Wilkinson
quelle
Dies ist meine bevorzugte Methode. Es ist praktischer als die Verwendung von Hintergründen.
Gillytech
1
Dies ist definitiv die bessere Option, meine Bilder wurden bei al.l
pwborodich
31

Einfachster Weg - Dadurch bleibt die Bildgröße unverändert und der andere Bereich wird mit Platz gefüllt. Auf diese Weise nehmen alle Bilder unabhängig von der Bildgröße den gleichen angegebenen Platz ein, ohne sie zu dehnen

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}
Manoj Selvin
quelle
1
Wow, so einfach war das wirklich. Vielleicht sind die anderen Antworten "richtig", aber diese war am einfachsten zu implementieren.
Randall Arms Jr.
5
Die einzige Einschränkung ist, dass es keine IE11-Unterstützung gibt.
Romuloux
Das Beste daran ist, dass Ihre Bilder weder beschnitten noch verzerrt sind, aber der Nachteil ist, dass sie immer noch nicht unbedingt alle dieselbe Größe haben. Anstelle von Objektanpassung: Verkleinern können Sie auch Objektanpassung: Abdeckung ausprobieren.
Vincent
19

Mit der object-fitEigenschaft können Sie die Größe der imgElemente ändern:

  • coverDehnt oder verkleinert das Bild proportional, um den Behälter zu füllen. Das Bild wird bei Bedarf horizontal oder vertikal zugeschnitten.
  • contain Dehnt oder verkleinert das Bild proportional, um in den Behälter zu passen.
  • scale-down verkleinert das Bild proportional, um in den Behälter zu passen.

.example {
  margin: 1em 0;
  text-align: center;
}

.example img {
  width: 30vw;
  height: 30vw;
}

.example-cover img {
  object-fit: cover;
}

.example-contain img {
  object-fit: contain;
}
<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

Im obigen Beispiel: Rot ist Landschaft, Grün ist Hochformat und Blau ist Quadratbild. Das Schachbrettmuster besteht aus 16x16px Quadraten.

Salman A.
quelle
1
Dies ist großartig, außer dass es für keine Version von IE funktioniert. caniuse.com/#feat=object-fit
Jameela Huq
3

Für diejenigen, die Bootstrap verwenden und die Reaktionsfähigkeit nicht verlieren möchten, stellen Sie einfach nicht die Breite des Containers ein. Der folgende Code basiert auf gillytech post.

index.hmtl

<div id="image_preview" class="row">  
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6" 
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

style.css

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

ODER style.css

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}
Sven Ya
quelle
3

Sie können es so machen:

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}
Arun ks
quelle
1

Ich suchte nach einer Lösung für dasselbe Problem, um eine Liste von Logos zu erstellen.

Ich habe mir diese Lösung ausgedacht, die ein bisschen Flexbox verwendet, was für uns funktioniert, da wir uns keine Sorgen um alte Browser machen.

In diesem Beispiel wird von einer 100 x 100 Pixel großen Box ausgegangen, aber ich bin mir ziemlich sicher, dass die Größe flexibel / reaktionsschnell sein kann.

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

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

ps.: Möglicherweise müssen Sie einige Präfixe hinzufügen oder Autoprefixer verwenden.

Rafaelbiten
quelle
1

Basierend auf Andi Wilkinsons Antwort (der zweiten) habe ich mich ein wenig verbessert. Stellen Sie sicher, dass die Bildmitte angezeigt wird (wie bei der akzeptierten Antwort):

HTML:

<div class="crop">
   <img src="img.png">
</div>

CSS:

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}
Alessia
quelle
1

Legen Sie die Parameter für Höhe und Breite in der CSS-Datei fest

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}

Ema
quelle
1
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

Sie stellen die Bildgröße auf div ein und können das Bootstrap-Raster verwenden, um die div-Größe entsprechend zu ändern

Manav Kothari
quelle
0

Die Bildgröße hängt nicht von der Höhe und Breite des Div ab.

benutze img element in css

Hier ist CSS-Code, der Ihnen hilft

div img{
         width: 100px;
         height:100px;
 }

Wenn Sie die Größe mit div einstellen möchten

benutze das

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

Durch diesen Code wird Ihr Bild in Originalgröße angezeigt, aber der erste Überlauf von 100 x 100 Pixel wird ausgeblendet

Asad Raza
quelle
0

Ohne Code ist es schwierig, Ihnen zu helfen, aber hier sind einige praktische Ratschläge für Sie:

Ich vermute, dass Ihre "Bildwand" eine Art Container mit einer ID oder Klasse hat, um ihr Stile zu geben.

z.B:

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

Das Stylen einer Größe für alle Bilder für Ihre Bildwand, ohne andere Bilder wie Ihr Logo usw. zu beeinflussen, ist einfach, wenn Ihr Code ähnlich wie oben eingerichtet ist.

#imagewall img {
  width: 100px;
  height: 100px; }

Wenn Ihre Bilder jedoch nicht perfekt quadratisch sind, werden sie mit dieser Methode verzerrt.

1934286
quelle
0

Gehen Sie zu Ihrer CSS-Datei und ändern Sie die Größe aller Ihrer Bilder wie folgt

img {
  width:  100px;
  height: 100px;
}
Bakslash
quelle
einfach und gerade!
KiwenLau