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

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

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