연속적으로 표시되는 다양한 수의 이미지가 있습니다. 해당 이미지가 화면에 맞게 자동으로 크기가 조정되기를 원합니다.
예 : 이미지가 1 개인 경우 화면의 최대 너비 또는 높이에 도달 할 때까지 자동으로 크기가 조정되어야합니다. 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>
이 바이올린 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다