Css li Element muss geändert werden

Question

Ich arbeite auf einer Website und ich Zoom-Eigenschaft von CSS zur Minimierung der Bildgröße verwendet.

Das unten genannte Bild war, dass ich

und ich habe erreichte es durch die Verwendung von CSS erreichen wollte: -

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

Aber der Zoom arbeitet nicht in Firefox so ich benutzte den folgenden Code und erhielt folgende css

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

So wird das Bild verzerrt. Kann mir bitte jemand sagen, wie ich es beheben kann? Meine HTML-Struktur ist: - dh ich habe HTML als: -

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> 

Bitte beachten Sie, ich meinen Code wollen in Chrome und Firefox zu funktionieren und alle anderen Browser

Answer 1

Für Firefox versuchen, dieses:

-moz-transform: scale(2); 

Answer 2

Hallo ich unten Code hoffen hilft Ihnen .Sie können diese entsprechend Ihrer eigenen ich habe gerade die Grund

.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

Try This active Klasse in der zweiten Bild in Snippet Beispiel hinzuzufügen. Update Css

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

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