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

您好希望下面的代码可以帮助您。您可以根据自己的需要自定义这个基本

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

在代码段示例中尝试使用此active类添加第二张图片。更新Css

没有Img Hover

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>