在移动视图中悬停图像大小答案

【问题标题】：on hover image size in mobile view在移动视图中悬停图像大小
【发布时间】：2016-07-26 17:06:54
【问题描述】：

我有个人资料图像缩略图，悬停时可以看到更大的图像，该图像存在于跨度中。它在大屏幕浏览器中完美运行，但在移动视图中悬停时显示相同大小的较大图像..

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;
 }

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

【问题讨论】：

您是否尝试过将宽度和高度更改为百分比值？
no.. 请建议我应该怎么做
你可以使用 bootstrap 和类名 img-responsive
不，它不工作@claudios
我使用过但 img-responsive 在移动视图中显示图像的原始大小...@Ozgur Ersil

标签： javascript jquery html css responsive-design

【解决方案1】：

您可以尝试像这样以百分比值设置宽度和高度。

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

【讨论】：

【解决方案2】：

使用media query

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

jsFiddle

【讨论】：