Wie man die Bildbreite auf die der Bootstrap-Spalte einstellt

Das fühlt sich an wie ein sehr einfaches Problem, dass ich mich für einen Hirnfurz ertappt habe. Ich habe 3 Bilder, die ich gerne auf eine bestimmte Art darstellen würde. Grundsätzlich möchte ich, dass ein Bild zu einem col-md/sm/xs-7 passt und zwei Bilder übereinander gestapelt werden, um automatisch zu col-md/sm/xs-3 zu passen. Alles zwischen einem col-md/sm/xs-1 auf jeder Seite eingewickelt.Wie man die Bildbreite auf die der Bootstrap-Spalte einstellt

Ich kann nicht herausfinden, welches CSS ich brauche, um dem Bild zu sagen, dass es an die Größe der Spalte angepasst werden soll. Irgendwelche Ideen?

Quelle

2017-02-14 RhinoTekMN

Breite: 100%; Höhe: Auto; auf dem Kind (die Bilder) füllen 100% des Elternteils (die Spalten), vorausgesetzt, Sie haben keinen Rand auf das Kind oder Padding angewendet, das auf den Eltern angewendet wurde. Wenn Sie möchten, dass die Bilder gestapelt werden, stellen Sie sicher, dass Sie display: block; auf jedes der Bilder einstellen. – Korgrue

Können Sie Ihren Code oder ein minimales Beispiel veröffentlichen? – ZimSystem

Sind die Bilder in den richtigen Abmessungen? Ich meine, die, die 50px mal 100px sein sollte, hat ein Verhältnis von '1: 2' und die Bilder, die 50px mal 50px sein sollten, sind' 1: 1'? Wenn nicht, wie willst du sie fit machen? Größe und verzerren Sie das Bild oder clip sie? –

So ähnlich?

<div class="row"> 
    <div class="col-md-7"> 
     <image class="img-responsive" src="largeimage.jpg" width="200" height="400"/> 
    </div> 
    <div class="col-md-5"> 
     <div class="row"> 
      <div class="col-md-3"> 
       <image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-3"> 
       <image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/> 
      </div> 
     </div> 
    </div> 
</div>

Ich verstehe nicht genau, wie genau Sie versuchen, Bilder zu arrangieren, aber ich denke, das sollte Ihnen helfen. Wenn du mir ein Bild davon machst, wie du die Bilder arrangieren willst, schneide ich dir meine Antwort zu.

Edit: Ok, ich denke ich könnte (?) Jetzt verstehen und das ist meine Lösung. Sie müssen entweder die Bilder nach Belieben skalieren. Oder, hoffentlich haben sie schon die Größe, die Sie wollen und werden gut passen. Probieren Sie es aus.

Quelle

2017-02-14 21:34:15 boymeetscode

im Grunde, wenn der Gesamtraum ist 100px um 100px Ich möchte 1 Bild auf 50px um 100px stehen und die zweite und dritte zu 50px zu 50px übereinander gestapelt – RhinoTekMN

RhinoTekMN - dann Bilder müssen quadratisch sein, weil das Ansichtsfenster nicht ist . Wenn sie nicht quadratisch sind, werden sie verzerrt oder abgeschnitten, wie @KodosJohnson in der Frage kommentierte. – ZimSystem

Das war nur ein Beispiel Ich möchte das Bild passen, was auch immer die Größe der Spalte Größe 7 ist, wenn die Breite der Spalte 7 Breite 300px dann möchte ich das Bild auf 300px passen. Auf diese Weise unabhängig von der Größe des Ansichtsfensters wird das Bild immer 7/12 Ansichtsfenster breit die 2 anderen Bilder werden immer 3/12 Ansichtsfenster Größe gestapelt und es wird ein 1/12 Puffer auf beiden Seiten sein – RhinoTekMN

Wie man die Bildbreite auf die der Bootstrap-Spalte einstellt

Antwort

Verwandte Themen