CSS Image Größe, wie zu füllen, aber nicht strecken?

Question

Ich habe ein Bild und möchte ihm eine bestimmte Breite und Höhe (in Pixeln) geben

Aber wenn ich Breite und Höhe mit css einstelle ( width:150px; height:100px ), wird das Bild gestreckt, und es kann hässlich sein.

Wie man Füllen Sie Bilder mit CSS auf eine bestimmte Größe zu bringen, und nicht dehnbar es?

Beispiel für das Füllen und Dehnen eines Bildes:

Originalbild:

Gestrecktes Bild:

Gefülltes Bild:

Bitte beachten Sie, dass im obigen Beispiel des gefüllten Bildes zuerst die Größe des Bildes auf 150x255 (beibehaltenes Seitenverhältnis) geändert wird, und dann wird es Ausgeschnitten auf 150x100.

Answer 1

Damit werden Bilder auf eine bestimmte Größe gefüllt, ohne sie zu strecken oder zu beschneiden.

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

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

Answer 2

Sie können es mit der "Flex"-Anzeige tun. für mich!:

.avatar-img {
    display: flex;
    justify-content: center;
    align-items: stretch;
    border-radius: 50%;
    border: 1px  solid #dee2e6;
    height: 5.5rem;
    width: 5.5rem;
    overflow: hidden;
}
.avatar-img > img {
    flex-grow: 1;
    object-fit: cover;
}

<div>
  <div class="avatar-img">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqczw3Fb_TYsj0hbPEy0u7Ay2bVq1KurD6hw&amp;usqp=CAU" alt="Test!'s profile photo">
  </div>
  <div class="avatar-img">
    <img src="https://i.pinimg.com/236x/a1/37/09/a137098873af3bf6180dd24cbe388ae9--flower-iphone-wallpaper-wallpapers-flowers.jpg" alt="Test!'s profile photo">
  </div>
</div>

Answer 3

Ich glaube, es ist ziemlich spät für diese Antwort. Wie auch immer, ich hoffe, dass dies jemandem in der Zukunft helfen wird. Ich hatte das Problem, die Karten in Angular zu positionieren. Es gibt Karten für Array von Ereignissen angezeigt. Wenn das Bild Breite des Ereignisses ist groß für Karte, das Bild sollte durch Beschneiden von zwei Seiten und Höhe von 100 % angezeigt werden. Wenn die Bildhöhe lang ist, wird der untere Teil des Bildes abgeschnitten und die Breite beträgt 100 %. Hier ist meine reine css-Lösung für dieses Problem:

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

Answer 4

Versuchen Sie so etwas: http://jsfiddle.net/D7E3E/4/

Verwendung eines Containers mit overflow: hidden

EDIT: @Dominic Green hat mich geschlagen.

Answer 5

Um das Bild im Vollbildmodus anzuzeigen, versuchen Sie Folgendes:

Hintergrund-Wiederholung: rund;