自动调整图像大小以适应屏幕
自动调整图像大小以适应屏幕
提问于 2014-03-17 17:11:43
我有不同数量的图像显示在一行中。我希望这些图像自动重新缩放以适应屏幕。
例如:如果我有一张图片，它应该会自动重新缩放，直到达到屏幕的最大宽度或高度(以先出现的为准)。如果有2个，我希望它们都占据半个屏幕。
有没有办法做到这一点，以及它是如何工作的？直到现在我才发现任何东西。谢谢。
我现在得到的是：
<!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>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-17 17:45:39
请参阅此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>
Stack Overflow用户
发布于 2014-03-17 17:18:19
使用jQuery的一种可能性是：
$('.col-md-3 img').css('width', 100/$('.col-md-3 img').length+"%");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22450361
复制相关文章
相似问题