Automatic image resizing to fit screen

Question

I have a varying number of images that are display in a row. I want those images to automatically rescale to fit the screen.

Example: If I have 1 image it should automatically rescale until it hits the max width or height of the screen (which ever comes first). If there are 2 I want them both to fill half the screen.

Is there a way to do it and how does it work? I did not find anything until now. Thank you.

What I currently got:

<!DOCTYPE HTML>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>

<body>
     <script src="http://code.jquery.com/jquery.js"></script>
     <script src="js/bootstrap.min.js"></script>

    <div class="row" id="images">
        <div class="col-md-3">
             <img src=1 class="img-responsive">
             <img src=2 class="img-responsive">
             <img src=3 class="img-responsive">
             <img src=4 class="img-responsive">
        </div>
    </div>
</body>
</html>

Okay, I did exactly that and it changes nothing. updated question — user2196234, Mar 17 '14 at 09:29

score 2 · Accepted Answer · edited May 08 '19 at 19:39

Please see this fiddle http://jsfiddle.net/3dR3u/

document.addEventListener("DOMContentLoaded", calculate, false);
window.addEventListener("resize", calculate, false);

function calculate() {
  var imgs = document.querySelectorAll(".col-md-3 img");
  var count = imgs.length;
  var wid = Math.floor(window.innerWidth / count);
  for (i = 1; i <= imgs.length; i++) {
    document.getElementById('img' + i).style.width = wid + 'px';
    if (document.getElementById('img' + i).clientHeight > window.innerHeight) {
      document.getElementById('img' + i).style.height = window.innerHeight + 'px';
    }
  }
}

.col-md-3 img {
  float: left;
}

body {
  margin: 0px;
}

<body>
  <div class="row" id="images">
    <div class="col-md-3">
      <img id="img1" src="http://farm4.staticflickr.com/3680/13191485343_88d5da5123.jpg">
      <img id="img2" src="http://farm4.staticflickr.com/3680/13191485343_88d5da5123.jpg">
      <img id="img3" src="http://farm4.staticflickr.com/3680/13191485343_88d5da5123.jpg">
      <img id="img4" src="http://farm4.staticflickr.com/3680/13191485343_88d5da5123.jpg">
    </div>
  </div>
</body>

Thank you. This works perfectly. Just found out if I have images that are higher than wide they do not stay within the max height of the screen. — user2196234, Mar 17 '14 at 10:05
I have updated my answer, not sure if this will solve it exactly. Chck this http://jsfiddle.net/cs7bc/ — SajithNair, Mar 17 '14 at 10:21

score 0 · Answer 2 · answered Mar 17 '14 at 09:18

0

Well a possibility, using jQuery, would be:

$('.col-md-3 img').css('width', 100/$('.col-md-3 img').length+"%");

answered Mar 17 '14 at 09:18

Dan Ovidiu Boncut

3,083
4
25
45

Okay, where does that line go? I need a context, please. – user2196234 Mar 17 '14 at 09:20
Are you using jQuery? If not, you should add this between your tags in page: and than add the line that I wrote in my answer between – Dan Ovidiu Boncut Mar 17 '14 at 09:42
Or add it in a javascript file – Dan Ovidiu Boncut Mar 17 '14 at 09:43
If you find this answer useful please rate it or accept it :) – Dan Ovidiu Boncut Mar 17 '14 at 09:56

Automatic image resizing to fit screen

2 Answers2

Linked