Responsive Images - Bootstrap - html

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!

Answer 2

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).