Bild in Container passen

Ich versuche Bootstrap-Grid-System mit Zeilen verwenden jede hat 4 Spalten enthält Bild, aber die Bildgröße ist groß und es wird über seinen Container, so dass ich Bildposition: absolute und div-Position: relativ, aber es funktioniert immer noch nicht. Gibt es eine Möglichkeit, das Bild an den div-Container mit Containergröße anzupassen?Bild in Container passen

HTML:

<div class="container"> 
     <div class="row"> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f1.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f2.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f3.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f4.jpg" alt="f1"> 
      </div> 
    </div> 
<div>

CSS:

.sec5row { 
     border : 1px solid red; 
     position: relative; 
    } 
    .filter { 
     position: absolute; 
    }

Quelle

2016-07-12 pexichdu

nur img verwenden {width: 100%} –

img {max-width: 100%;} könnte funktionieren. Oder vielleicht sogar img {width: 100%;}, wenn du es immer bei 100% willst. – RMo

Oder noch besser fügen Sie die Bootstrap-Klasse img-responsive auf das Image (vorausgesetzt, Sie verwenden Bootstrap basierend auf der Art, wie Sie Spalten erstellen). – RMo

Add CSS Code

#img { 
    width: 100px;//change px size 
    height: 100px;//change px size 
    padding-left: 3px; 
    padding-top: 5px; 
}

Quelle

2016-07-12 07:51:38 Ranjan

warum #img ?? Es gibt keine ID mit für img-Tag –

machen Sie eine einfache ID = "", dass es nichts beeinflussen wird. – Ranjan

oder verwenden Sie Klasse wie ".filter" – Ranjan

können Sie den Code unten verwenden Bild im Inneren des ansprechenden div passen

.filter { 
    width:100%;/*To occupy image full width of the container and also fit inside the container*/ 
    max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/ 
    height:auto; 
    }

Quelle

2016-07-12 07:52:49 bubesh

Können Sie mir sagen, warum Höhe: Auto? Entschuldigung, ich bin so neu. – pexichdu

@pexichdu Um das Seitenverhältnis des Bildes basierend auf der Breite beizubehalten oder sonst wird das Bild gestreckt, da wir die Breite als 100% angegeben haben – bubesh

Ich denke, die Bootstrap-Klasse ".img-responsive" löst Ihr Problem. So versuchen, so etwas wie dieses:

<div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f1.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f2.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f3.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f4.jpg" alt="f1"> 
 
      </div> 
 
    </div> 
 
<div>

Es setzt den Stil des Bildes auf "max-width: 100%;" und "Höhe: Auto;" Das sollte genau das sein, was du brauchst. Es sollte kein zusätzliches CSS erforderlich sein.

Quelle

2016-07-12 07:55:21 Jabalaja

Fügen Sie einfach class = "img-responsive" zu Ihrem img-Tag ... es funktioniert gut

Quelle

2016-07-20 10:49:06

Antwort

Verwandte Themen