Bootstrap Snippet Responsive Images using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>This is my Snipp</h2>
        
        <p>I need help.</p>
        
        <img class="visible-lg" src="http://i.imgur.com/J9cwCq9.jpg" alt="" title="File size= 750KB">
      <img class="visible-md" src="http://i.imgur.com/Mjf7tWg.png?1" alt="" title="File size= 355KB">
      <img class="visible-sm" src="http://i.imgur.com/5JLR7In.png?1" alt="" title="File size= 239KB">
      <img class="visible-xs" src="http://i.imgur.com/flG6XZR.png?1" alt="" title="File size= 55KB">
        
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
body{
    background-color:black;
    color:#ccc;
    }
img{
    padding:30px
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
* How to detect browser width
* Ref: http://www.surfingsuccess.com/jquery/window-width.html#.Uw1RiV6Lfx4
*/
$(window).ready(function() {
    var wi = $(window).width();  
    $("p.testp").text('Initial screen width is: ' + wi + 'px.');
 
    $(window).resize(function() {
        var wi = $(window).width();
            $("p.testp").text('Width is currently: ' + wi + 'px.');
    });            
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive Images"
Bootstrap 3.3.0 Snippet by selmahr1

Related: See More

Questions / Comments:

"Responsive Images" Bootstrap 3.3.0 Snippet by selmahr1

Related: See More

Questions / Comments:

"Responsive Images"
Bootstrap 3.3.0 Snippet by selmahr1