自动调整图像大小以适应屏幕

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). 示例：如果我有1个图像，它应该自动重新缩放，直到它达到屏幕的最大宽度或高度（这是最先出现的）。 If there are 2 I want them both to fill half the screen. 如果有2个，我希望它们都填满屏幕的一半。

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>

Answer 1

Please see this fiddle http://jsfiddle.net/3dR3u/ 请看这个小提琴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>

Answer 2

使用jQuery的可能性是：

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

自动调整图像大小以适应屏幕

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-03-17 09:45:39

解决方案2
0 2014-03-17 09:18:19

自动调整图像大小以适应屏幕

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-03-17 09:45:39

解决方案2 0 2014-03-17 09:18:19

解决方案1
2 已采纳 2014-03-17 09:45:39

解决方案2
0 2014-03-17 09:18:19