javascript - 在移动 View 中悬停图像大小

Question

我有个人资料图片缩略图，悬停时可以看到更大的图片，它出现在 span 中.. 它在大屏幕浏览器中完美运行，但在移动 View 中悬停时显示相同尺寸的大图..

https://jsfiddle.net/5L88ww69/

HTML:

   <a href="#" class="thumbnail2"> 
                          <img src="img/user/04.jpg" width="60" height="60" class="img-thumbnail"/>
                          <span style="top:60px; left: 60px; width: 400px;height: 450px;"><img src="img/user/04.jpg" class="img-thumbnail"/><br /></span>
                        </a>

CSS:

  .thumbnail2  {
  position: relative;
   float: left;
   z-index: 50;
  }

 .thumbnail2:hover span {
  visibility: hidden;
 }

.thumbnail2 span { 
  position: absolute;
  padding: 5px;
  visibility: hidden;
 text-decoration: none;
 }

.thumbnail2 span img { 
 border-width: 0px; 
 }


.thumbnail2:hover span { 
  visibility: visible; 
  width: 800px;
  height: 800px;
  top: 60px; 
  left: 60px;
 }

如何在移动 View 中显示完全适合移动 View 的大图？

Answer 1

使用媒体查询

 @media all and (max-width: 600px){
   .thumbnail2 span {
    left: 0!important;
    width: 100%!important;
    overflow: hidden;
}
.thumbnail2 span img {
    width: 100%!important;
}
 }

jsFiddle