CSS: Wie behält man das Bild nie mit der gleichen "Offset" die ganze Zeit verändert?

Question

<img src="/static/img/footer-top.png" 
    style="margin: 0; padding: 0; width: 100%; position: relative; left: 0"> 

<footer id="footer" style="background-color: #214269; height: 100%"> 
    <div class="footerrow"> 
     <div class="container"> 
      <div class="col-lg-12"> 
       <div class="footer-box"> 
        <ul class="footer-links"> 
         <li class="active"><a href="/fr/legal/a-propos/">À propos</a></li> 
         <li><a href="/fr/legal/contact/">Contact</a></li> 
         <!-- blabla --> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</footer> 

Das ist, was Sie bekommen:

Das Problem ist, wenn Sie die Größe des Fensters, wird das Bild der Größe verändert auch das macht zwei schlechte Dinge

:

• das Logo nicht ist richtig ausgerichtet mehr
• das ganze Logo ist kleiner oder größer

So:

ich die Lösung auf Google finden didnt: nicht skalierte Bild, versetzt mit festen und kein background-image, aber ein Tagimg.

Answer 1

Stellen Sie Ihre Bilder mit ihren tatsächlichen Werten in der HTML-up, etwa so:

<img class="vanish" src="images/colours.png" alt="Colourful painting" width="480" height="615"> 

Im obigen Beispiel, die tatsächliche Größe des Bildes Ich Verknüpfung 480 ist von 615.

Dann steuern Sie die Positionierung und Größe ändern, wenn Sie über Ihre CSS-Datei benötigen.

Denken Sie daran:es okay ist, Ihr Bild kleiner via CSS zu machen, aber wenn Sie nicht die ursprüngliche größere Größe Bild verwenden, dann stellen Sie sicher, es mit dem größten beabsichtigen Sie eigentlich ersetzen zu verwenden.

So zum Beispiel: Jsfiddle

.container { 
 
    width: 960px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
} 
 
.image-wrapper { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.image-wrapper img { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
p { 
 
    word-spacing: 20px; 
 
}

<div class="container"> 
 
    <div class="image-wrapper"> 
 
    <img src="http://i.imgur.com/sUB6EMh.png" width="200" height="200"> 
 
    <p>HOME ABOUT GALLERY CONTACT</p> 
 
    </div> 
 
</div>