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

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?

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>

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

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;

}

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.

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

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

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.

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+ */
}

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

.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

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

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.

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

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