li 元素的 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

试试这个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>

Answer 3

您好，希望下面的代码对您有所帮助。您可以根据自己的需要自定义这个我只是做了基本的

.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>