Responsive Images - Bootstrap

Question

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/

Answer 1

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!