李元素的Css需要更改

Question

我在网站上工作，并使用CSS的缩放属性来最小化图像大小。

下面提到的形象，是我想达到

，我也用CSS来实现它： -

.nav-pills > li > a > img { 
    zoom:35%; 
} 

但变焦无法在Firefox中工作，所以我使用下面的代码，并得到以下css

.nav-pills > li > a > img { 
    border: 4px solid #5a827f; 
    border-radius: 25px; 
    background: white; 
    padding: 20px; 
    margin-bottom: 15px; 
} 

因此图像变形。有人可以告诉我如何解决它。我的HTML结构是： - 即我有HTML为： -

ul class="nav-pills" > li > a > i 

<ul class="nav nav-pills nav-justified"> 
    <li ng-class="{active: $index == 0}" ng-repeat="tab in tabs"> 
     <a data-target="#tab{{$index + 1}}" data-toggle="tab" class="thumbnail"><img ng-src="{{tab.image}}" alt="" />{{tab.title}}</a> 
    </li> 
</ul> 

请注意，我想我的代码在Chrome和Firefox和其他浏览器

Answer 1

来运作对于Firefox试试这个：

-moz-transform: scale(2); 

Answer 2

您好，我希望下面的代码可以帮助你。你可以根据你自己的自定义此我只是做了基本

.nav-pills > li > a > img:hover { 
 
    -webkit-transform: scale(1.5); 
 
    -moz-transform: scale(1.5); 
 
    -o-transform: scale(1.5); 
 
    -ms-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
}

<ul class="nav nav-pills nav-justified"> 
 
    <li> 
 
     <a href="#" rel="p1" class="thumbnail"> 
 
      <img src="mm.jpg" 
 
      width="55" height="60" alt=""/>       
 
     </a> 
 
    </li> 
 
        
 
    </ul>

Answer 3

试一试active类在第二图像中的片段实施例添加。 更新的CSS

没有图悬停

ul 
 
{ 
 
    list-style-type:none; 
 
} 
 
.nav-pills > li > a > img { 
 

 
border: 4px solid #5a827f; 
 
border-radius: 25px; 
 
background: white; 
 
padding: 20px; 
 
margin-bottom: 15px; 
 
float:left; 
 
} 
 
.nav-pills > li > a > img { 
 
zoom:35%; 
 
} 
 
.nav-pills > li > a.active > img 
 
{ 
 
    border-bottom: 15px solid black; 
 
    margin-bottom: 0px; 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
}

<ul class="nav nav-pills nav-justified"> 
 
    <li > 
 
     <a data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a> 
 
    </li> <li > 
 
     <a data-toggle="tab" class="thumbnail active"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a> 
 
    </li> 
 
     <li > 
 
     <a data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a> 
 
    </li> 
 
     <li > 
 
     <a data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a> 
 
    </li> 
 
</ul>

随着图像悬停

ul 
 
{ 
 
    list-style-type:none; 
 
} 
 
.nav-pills > li > a > img { 
 

 
    border: 4px solid #5a827f; 
 
    border-radius: 25px; 
 
    background: white; 
 
    padding: 20px; 
 
    margin-bottom: 15px; 
 
    float:left; 
 
} 
 
.nav-pills > li > a > img { 
 
zoom:35%; 
 
} 
 
.nav-pills > li > a > img:hover 
 
{ 
 
    border-bottom: 15px solid black; 
 
    margin-bottom: 0px; 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
}

<ul class="nav nav-pills nav-justified"> 
 
    <li > 
 
     <a data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a> 
 
    </li> <li > 
 
     <a data-toggle="tab" class="thumbnail active"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a> 
 
    </li> 
 
     <li > 
 
     <a data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a> 
 
    </li> 
 
     <li > 
 
     <a data-toggle="tab" class="thumbnail"><img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" /></a> 
 
    </li> 
 
</ul>