it-swarm.com.de

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

Ich versuche eine Bildwand zu erstellen, die aus Produktfotos besteht. Leider sind alle unterschiedlich hoch und breit. Wie kann ich css verwenden, damit alle Bilder gleich groß aussehen? 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 es ausgefüllt wird. Nie sicher, wie das geht. 

Wie kann ich das erreichen?

50
ariel

.img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    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>

109
Simon Arnold

kann ich einfach einwerfen, dass, wenn Sie Ihre Bilder zu stark verzerren, dh sie aus einem Verhältnis herausnehmen, sie möglicherweise nicht richtig aussehen - eine kleine Menge ist in Ordnung, aber eine Möglichkeit, dies zu tun, ist, die Bilder in einen 'Container' und setzen Sie den Container auf 100 x 100, stellen Sie dann ein, dass kein Bild überläuft, und stellen Sie die kleinste Breite auf die maximale Breite des Containers ein. Dadurch wird jedoch ein Teil des Bildes beschnitten. 

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 des Containers bei, ändert jedoch seine Größe, ohne die Einschränkungen zu brechen 

25
Andi Wilkinson

Einfachste Methode - Dadurch wird die Bildgröße beibehalten und der andere Bereich mit Platz gefüllt. Auf diese Weise nehmen alle Bilder unabhängig von der Bildgröße den angegebenen Platz ein, ohne sie zu strecken

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

}
13
Manoj Selvin

Sie können die Eigenschaft object-fit verwenden, um die img-Elemente zu dimensionieren:

  • cover streckt oder verkleinert das Bild proportional, um den Container zu füllen. Das Bild wird bei Bedarf horizontal oder vertikal abgeschnitten.
  • contain streckt oder verkleinert das Bild proportional, um in den Container zu passen.
  • scale-down verkleinert das Bild proportional, um in den Container 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 quadratisches Bild. Das Schachbrettmuster besteht aus 16x16px-Quadraten.

8
Salman A

Für Benutzer, die Bootstrap verwenden und die Reaktionsfähigkeit nicht verlieren möchten, geben Sie die Breite des Containers nicht an. Der folgende Code basiert auf dem Beitrag gillytech.

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;
}
3
Sven Ya

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

1
Ema

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%;
}
1
Arun ks

Ich habe nach einer Lösung für dieses Problem gesucht, um eine Liste mit Logos zu erstellen.

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

Dieses Beispiel setzt eine 100x100px-Box voraus, aber ich bin mir ziemlich sicher, dass die Größe flexibel 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.

0
rafaelbiten

Ohne Code ist dies schwer 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 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 Anpassen einer Größe für alle Bilder für Ihre Bildwand, ohne Auswirkungen auf andere Bilder, z. B. Ihr Logo usw., ist einfach, wenn der Code ähnlich wie oben eingestellt ist.

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

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

0
fredsbend

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

verwende img element in css

Hier ist CSS-Code, der Ihnen hilft

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

wenn Sie die Größe durch div einstellen möchten

benutze das

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

mit diesem Code wird Ihr Bild in Originalgröße angezeigt, aber zuerst werden 100 x 100 Pixel Überlauf angezeigt

0
asad raza

Basierend auf Andi Wilkinsons Antwort (der zweite), habe ich mich etwas verbessert, stellen Sie sicher, dass die Mitte des Bildes angezeigt wird (wie die akzeptierte 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+ */
}
0
Alexee

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

img {
  width:  100px;
  height: 100px;
}
0
bakslash
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

Die Größe der Images entspricht der von div, und Sie können das Bootstrap-Raster verwenden, um die Div-Größe entsprechend zu ändern

0
Manav Kothari