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

Ich versuche ein abbild zu schaffen, Wand, bestehend aus Produkt-Fotos. Leider, alle von Ihnen sind von unterschiedlicher Höhe und Breite. Wie kann ich css verwenden, um alle Bilder gleich Aussehen, Größe? vorzugsweise 100 x 100.

Dachte ich machst einen div hat die Höhe und die Breite von 100px und dann, wie einige füllen es. Nicht sicher, wie das zu tun.

Wie kann ich dies erreichen?

InformationsquelleAutor der Frage ariel | 2013-10-16

  1. 20

    kann ich nur werfen, wenn Sie verzerren Ihre Bilder zu viel, dh Sie ist ein Verhältnis, Sie kann nicht richtig suchen, - eine winzige Menge ist in Ordnung, aber ein Weg dies zu tun ist, setzen die Bilder in einen "container" und setzen Sie den Behälter auf die 100 x 100, dann stellen Sie Ihr Bild zu einem überlauf keine, und die kleinste Breite der maximalen Breite des Containers, das wird Ernte ein Stück von deinem Bild, obwohl,

    beispielsweise 

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

    Diese Weise wird das Bild bleiben, die Größe der container, sondern die Größe ändern, ohne zu brechen Einschränkungen

    InformationsquelleAutor der Antwort Andi Wilkinson

  2. 6

    Einfachste Art und Weise - Dadurch bleibt die Größe des Bildes wie es ist, und füllen Sie die anderen Umgebung und mit Platz, damit alle Bilder nehmen dieselben einen bestimmten Bereich unabhängig von der Bildgröße ohne Dehnung

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

}

    InformationsquelleAutor der Antwort Manoj Selvin

  3. 3

    Für diejenigen, die sich mit Bootstrap und die nicht wollen, zu verlieren, die responsivness nur nicht die Breite des Containers. Der folgende code basiert auf gillytech post.

    index.HTML

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

    Stil.css

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

    ODER Stil.css

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

    InformationsquelleAutor der Antwort Sven Ya

  4. 1

    Können Sie es auf diese Weise:

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

    InformationsquelleAutor der Antwort Arun ks

  5. 0

    Bild Größe ist nicht davon abhängig, div Höhe und Breite,

    verwenden img-element in css

    Hier ist der css-code, der Ihnen helfen

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

    wenn Sie wollen, um die Größe von div

    verwenden Sie diese

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

    durch diese code-Bild-show in original Größe, zeigen aber erste 100x100px überlauf verstecken

    InformationsquelleAutor der Antwort asad raza

  6. 0

    Ohne code ist das schwer zu Ihnen helfen, aber hier sind einige praktische Ratschläge für Sie:

    Ich vermute, dass Ihre "Bild-wall", eine Art container mit einer id oder class zu geben, es Stile.

    zB:

    <body>

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

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

    Styling eine Größe, die auf alle Bilder für Ihre image-Wand, die zwar nicht für die anderen Bilder, wie Sie Logos, etc. ist einfach, wenn Ihr code eingerichtet ist ähnlich wie oben.

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

    Aber wenn Sie Ihre Bilder sind nicht perfekt quadratisch, Sie werden schief mit dieser Methode.

    InformationsquelleAutor der Antwort fredsbend

  7. 0

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

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

    InformationsquelleAutor der Antwort bakslash

  8. 0

    War ich auf der Suche nach einer Lösung für dieses problem, um eine Liste zu erstellen von logos.

    Kam ich mit dieser Lösung wird ein bisschen von flexbox, die arbeitet für uns, denn wir sind nicht besorgt über alte Browser.

    Diesem Beispiel wird davon ausgegangen, ein 100x100px-box, aber ich bin mir ziemlich sicher, dass die Größe könnte flexibel/reaktionsschnell.

    .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 fügen Sie einige Präfixe oder verwenden Sie autoprefixer.

    InformationsquelleAutor der Antwort rafaelbiten

  9. 0

    Basierend auf Andi Wilkinson Antwort (die zweite), ich verbesserte ein wenig, stellen Sie sicher, dass die Mitte des Bildes angezeigt wird (wie die akzeptierte Antwort hat):

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

    InformationsquelleAutor der Antwort Alexee

Schreibe einen Kommentar