弹出时调整图像大小

时间：2015-08-27 13:31:10

标签： javascript html css

我想在单击图像时将图像的大小调整为大于原始大小。链接http://plnkr.co/edit/JBTE1RAEZburUTRkVrLE?p=preview。此示例单击图像时，弹出但原始大小相同。如何将其设置得更大。

代码下方：

＆＃13;
＆＃13; 
// Code goes here
function view(src)
            {
                var viewer = document.getElementById("viewer");
                viewer.innerHTML ='<img src="' + src + '" id="img"/>';
                var img = document.getElementById("img");
                var iw=0, ih=0;
                var dw=0, dh=0;
                img.onload=function(){
                    document.getElementById("ov").style.display="block"; 
                    viewer.style.display="block";
                    document.getElementById("nav").style.display="block";
                    iw = viewer.offsetWidth;
                    ih = viewer.offsetHeight;
                    dw = window.innerWidth;
                    dh = window.innerHeight;
                    viewer.style.top = parseInt(dh/2-ih/2) + "px";
                    viewer.style.left = parseInt(dw/2-iw/2) + "px";
                };
            }
            function hide2()
            {
                document.getElementById("viewer").style.display="none";
                document.getElementById("ov").style.display="none";
				        document.getElementById("nav").style.display="none";
            }
＆＃13; 
/* Styles go here */
ul.image-list{
    padding:0;
    margin: 0;
    list-style: none;
}
ul.image-list li{
    display: inline-block;
}
ul.image-list li img{
    width: 190px;
    min-width: 70px;
    transition: all ease 0.4s;
}
ul.image-list li img:hover{
    cursor: pointer;
    opacity: 0.5;
    border: 1px solid #000;
}
.pup
{
  width: 100%; height: 100%;
  background: #666;
  opacity: 0.7;
  position: fixed;
  top: 0px; left: 0px;
  z-index: 111;
  display: none;
}
.viewer{
  background: #666; padding: 12px;
  position: fixed; z-index: 222;
  text-align: center;
  display: none;
}
#nav{
  display: none;
  z-index: 333;
  color: #FFF;
  position: relative;
  cursor: pointer; text-align: center;
}
＆＃13; 
<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container-fluid gallery">
    <div class="row-fluid">
        <div class="col-sm-12">
            <h3 class="text-info">Photo Gallery</h3>
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-sm-12">
            <ul class="image-list">
                <li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
                <li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
                <li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
                <li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            </ul>
             <div class="slider-controls" id="nav">
                <span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span>
                <span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span>
            </div>
        </div>
    </div>
</div>
<div class="pup" id="ov" onclick="hide2()">
</div>
<div class="viewer"id="viewer">
</div>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

通过将所需尺寸的图像指定给div .viewer，如下.viewer img{width:600px}，您可以强制图像调整大小以适合所需尺寸。在工作片段下方。

// Code goes here
function view(src)
            {
                var viewer = document.getElementById("viewer");
                viewer.innerHTML ='<img src="' + src + '" id="img"/>';
                var img = document.getElementById("img");
                var iw=0, ih=0;
                var dw=0, dh=0;
                img.onload=function(){
                    document.getElementById("ov").style.display="block"; 
                    viewer.style.display="block";
                    document.getElementById("nav").style.display="block";
                    iw = viewer.offsetWidth;
                    ih = viewer.offsetHeight;
                    dw = window.innerWidth;
                    dh = window.innerHeight;
                    viewer.style.top = parseInt(dh/2-ih/2) + "px";
                    viewer.style.left = parseInt(dw/2-iw/2) + "px";
                };
            }
            function hide2()
            {
                document.getElementById("viewer").style.display="none";
                document.getElementById("ov").style.display="none";
				        document.getElementById("nav").style.display="none";
            }
/* Styles go here */
ul.image-list{
    padding:0;
    margin: 0;
    list-style: none;
}
ul.image-list li{
    display: inline-block;
}
ul.image-list li img{
    width: 190px;
    min-width: 70px;
    transition: all ease 0.4s;
}
ul.image-list li img:hover{
    cursor: pointer;
    opacity: 0.5;
    border: 1px solid #000;
}
.pup
{
  width: 100%; height: 100%;
  background: #666;
  opacity: 0.7;
  position: fixed;
  top: 0px; left: 0px;
  z-index: 111;
  display: none;
}
.viewer{
  background: #666; padding: 12px;
  position: fixed; z-index: 222;
  text-align: center;
  display: none;
}
#nav{
  display: none;
  z-index: 333;
  color: #FFF;
  position: relative;
  cursor: pointer; text-align: center;
}

.viewer img{
  width:600px;
  
}
<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container-fluid gallery">
    <div class="row-fluid">
        <div class="col-sm-12">
            <h3 class="text-info">Photo Gallery</h3>
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-sm-12">
            <ul class="image-list">
                <li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
                <li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
                <li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
                <li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            </ul>
             <div class="slider-controls" id="nav">
                <span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span>
                <span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span>
            </div>
        </div>
    </div>
</div>
<div class="pup" id="ov" onclick="hide2()">
</div>
<div class="viewer"id="viewer">
</div>
  </body>

</html>

我还建议添加以下代码，以便您可以在移动设备上进行响应，以便更好地进行冲浪：

@media screen and (max-width: 600px) {
  .viewer{
    width:100%;
  }
  .viewer img{
    width:100%;
  }
}
相关问题
最新问题