移动视图中的悬停图像大小 [英] on hover image size in mobile view

问题描述

我有个人头像缩略图，悬停时可以看到较大的图像，该图像出现在跨度中.它在大屏幕浏览器中完美运行，但在移动视图中悬停时显示相同尺寸的较大图像.

I have profile image thumbnail and on hover larger image get visible which is present in span.. It works perfectly in browser for large screen but showing same size larger image on hover in mobile 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;
 }

如何在移动视图中显示完全适合移动视图的较大图像?

how to show larger image in mobile view which perfectly fits in mobile view?

推荐答案

使用媒体查询

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

jsFiddle

jsFiddle

这篇关于移动视图中的悬停图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！