CSS und HTML-Übergang

Question

Eine Website hat ein Bild (logo.png) oben rechts neben einer Wortfolge.

Wenn eine Maus über dem Logo und den Wortfolgen schwebt, rotieren die Wörter und werden weiß.

Wenn ich jedoch die Reihenfolge der Wörter zu einer mit weniger Wörtern als der Standard ändern, verkleinert sich das Logo.

Ich habe über die CSS3 und HTML5-Dateien und haben es nicht geschafft, dieses Problem zu lösen.

Dies ist der html:

<div class="navbar-header logo"> 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
           <span class="sr-only">Toggle navigation</span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
          </button> 
          <h1> 
           <a class="navbar-brand link link--yaku" href="index.html"><span>C</span><span>O</span><span>N</span><span>S</span><span>O</span><span>R</span><span>T</span><span>I</span><span>U</span><span>M</span></a> 
          </h1> 

         </div> 

Dies ist der CSS3-Code:

.logo a{ 
text-decoration:none; 
} 
.logo .link { 
    outline: none; 
    text-decoration: none; 
    position: relative; 
    font-size: 8em; 
    line-height: 1; 
    color: #fff; 
    display: inline-block; 
} 
    .logo .link--yaku { 
     color: #fff; 
     font-weight: 600; 
     font-size: 38px; 
     overflow: hidden; 
     padding: 12px 0 12px 50px; 
     background: url(../images/logo.png) no-repeat 0px 18px; 
     background-size: 15% !important; 
    } 
    .logo .link--yaku::before { 
     content: ''; 
     position: absolute; 
     height: 100%; 
     width: 100%; 
     left: 0; 
     -webkit-transform: translate3d(-101%,0,0); 
     transform: translate3d(-101%,0,0); 
     -webkit-transition: -webkit-transform 0.5s; 
     transition: transform 0.5s; 
    } 
    .logo .link--yaku:hover::before { 
     -webkit-transform: translate3d(0,0,0); 
     transform: translate3d(0,0,0); 
    } 
    .logo .link--yaku span { 
     display: inline-block; 
     position: relative; 
     -webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg); 
     transform: perspective(1000px) rotate3d(0,1,0,0deg); 
     -webkit-transition: -webkit-transform 0.5s, color 0.5s; 
     transition: transform 0.5s, color 0.5s; 
    } 
    .logo .link--yaku:hover span { 
     color: #fff; 
     -webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg); 
     transform: perspective(1000px) rotate3d(0,1,0,360deg); 
    } 
    .logo .link--yaku span:nth-child(4), 
    .logo .link--yaku:hover span:first-child { 
     -webkit-transition-delay: 0s; 
     transition-delay: 0s; 
    } 
    .logo .link--yaku span:nth-child(3), 
    .logo .link--yaku:hover span:nth-child(2) { 
     -webkit-transition-delay: 0.1s; 
     transition-delay: 0.1s; 
    } 
    .logo .link--yaku span:nth-child(2), 
    .logo .link--yaku:hover span:nth-child(3) { 
     -webkit-transition-delay: 0.2s; 
     transition-delay: 0.2s; 
    } 

    .logo .link--yaku span:first-child, 
    .logo .link--yaku:hover span:nth-child(4) { 
     -webkit-transition-delay: 0.3s; 
     transition-delay: 0.3s; 
    } 

Answer 1

Sie Ihr Logo als Hintergrund-Bild verwenden und die Größe auf 15% des eingestellten Elemente horizontale Breite (background-size ist immer relativ zum Element, NICHT relativ zur verwendeten Hintergrund-img-Breite). Die vertikale Größe ist auf auto eingestellt (background-size: 15% entspricht background-size: 15% auto) und skaliert daher mit der Breite des Elements.

Wenn sich also die Breite Ihres Elements verringert, passt sich die Größe Ihres Hintergrundbildes (sowohl horizontal als auch vertikal) an.

Wenn Sie Ihr Element, das das Logo als Hintergrundbild hat, auf eine feste Breite einstellen, ändert sich das Hintergrundbild nicht. Sie könnten dies z. von

.logo .link--yaku { 
    display: inline-block; //it's currently an inline element and would otherwise ignore the width property 
    width: 316px; 
}