CODEWITHSUNDEEP
htmltwitter-bootstrapresponsive
MrBlobby
MrBlobby

Reputation: 71

Responsive Images - Bootstrap

I am using the bootstrap framework, I am looking to have 3 images as shown in the jsfiddle link below act in a responsive manor when the window size changes/monitor size is too small to display the full sized images. It is important the images remain on the same line (if possible) with no spacing in between.

<img src="http://via.placeholder.com/660x160.png"><img src="http://via.placeholder.com/350x160.png"><img src="http://via.placeholder.com/350x160.png">

Thanks

https://jsfiddle.net/mztyoy7q/

Upvotes: 4

Views: 8700

Answers (2)

kamyl
kamyl

Reputation: 6376

Wrap your images to some grid/columns (e.g. .col-*) and make these images to fill 100% of available space (.img-responsive). This is a clean and elegant way to do it, using just bootstrap:

<div class="row">
  <div class="col-xs-4">
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png">
  </div>
  <div class="col-xs-4">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
  </div>
  <div class="col-xs-4">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
  </div>
</div>

https://jsfiddle.net/tvv89L1j/1/

About removing spaces, the easiest way would be just add your own styles to overwrite padding that bootstrap adds. You need to set padding-left and padding-right to 0 for columns (you can see where that padding comes from in browser inspector, of course).

Upvotes: 1

InvincibleM
InvincibleM

Reputation: 519

Add a class to the image tags, and don't forget to add the bootstrap! Just make sure you link the bootstrap, and you can use this free CDN:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

and add the class

class="img-responsive"

to your img tags.

JSFiddle

EDIT: If you want the images on the same line, just create a couple divs. first, create a parent div,

<div style="display:inline-block; width:100%; height:auto; background-color:#ff0000;">
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>

This div element will be red with 100% width, and automatically resizing height. Then add divs between every image with the style float:left; like so:

<div style="display:inline-block; width:100%; height:auto;background-color:#ff0000;">
  <div style="float:left;">
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png">
  </div>
  <div style="float:left;">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
  </div>
  <div style="float:left;">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
  </div>
</div>

Here is the updated JSFiddle If this works, please let me know!

Upvotes: 7

Related Questions