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

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>

Answer 2

Soweit ich weiß, gibt es ein Plugin, das dies vereinfacht.

jQuery-Plugin: Automatische Umwandlung von <img> in einen Hintergrundstil

<img class="fill" src="image.jpg" alt="Fill Image"></img>

<script>
    $("img.fill").img2bg();
</script>

Außerdem erfüllt dieser Weg auch die Anforderungen der Barrierefreiheit. Da dieses Plugin den <img>-Tag NICHT aus Ihrem Code entfernt, zeigt der Screenreader den ALT-Text an, anstatt ihn zu überspringen.

Answer 3

Müssen Sie background-size : cover in der Css

js-Code

 <div>
   <div className={styles.banner}>banner</div>
 </div>

css-code

.banner{
  background: 
    url("./images/home-bg.jpg");
  background-size: cover;
  height: 53rem;
  width: 100%;
}

• Die Objektanpassung funktioniert nicht
• background-size: contain funktioniert auch nicht