Enthalten ein Bild in Div

Ich habe 4 Bilder mit den Größen von 500x500. Das Problem, das ich habe, ist, dass das letzte Bild von der Seite überspannt, was unnötigen Platz macht. Wie kann ich verhindern, dass die Seite übersprungen wird?Enthalten ein Bild in Div

HTML:

<div id="collage"> 
<div class="row"> 

<div class="col-md-3"> 
    <img src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg> 
</div> 

<div class="col-md-3"> 
    <img src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg> 
</div> 

<div class="col-md-3"> 
    <img src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg> 
</div> 

<div class="col-md-3"> 
    <img src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w> 
</div> 

</div> 
</div>

CSS:

#collage img { 
background-size: cover; 
}

Quelle

2017-03-25 RogerFedFan

Ist die bestimmte Auflösung nach? Ein Beispiel wäre großartig. – zurfyx

@zurfyx Das letzte Bild erstreckt sich von der Seite nach rechts, wodurch Leerraum für die ganze Seite entsteht. Wie ich habe 4 Bilder und ich möchte sie so, dass sie richtig auf den Bildschirm passen. – RogerFedFan

Versuchen Hinzufügen der .img-responsive Klasse, wie folgt aus:

<div id="collage"> 
<div class="row"> 

<div class="col-md-3"> 
    <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg> 
</div> 

<div class="col-md-3"> 
    <img class="img-responsive" src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg> 
</div> 

<div class="col-md-3"> 
    <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg> 
</div> 

<div class="col-md-3"> 
    <img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w> 
</div> 

</div> 
</div>

Quelle

2017-03-25 22:59:27

aus irgendeinem Grund, wenn ich den Div-Abschnitt mit der Zeile und den Spalten mache, erzeugt es einen Leerraum auf der linken Seite und verschiebt alles fast so, wie es Polsterung gibt. – RogerFedFan

machen Bildtag max-width zu 100% wie folgender css-Code löst Ihr Problem.
img {maximale Breite: 100%; }

Quelle

2017-03-25 23:55:17 Bandhan

diese css Versuchen

#collage img { 
 
    width: 100%; 
 
}

Quelle

2017-03-26 00:31:49

Enthalten ein Bild in Div

Antwort

Verwandte Themen