Notwendigkeit, Größe des Banners zu ändern, um Fenster zu passen CSS

Question

Ich versuche, mein Aufstellungsortlogo/-banner passend zu dem zufriedenen Kasten richtig zu bilden. Leider erscheint es bei verschiedenen Breiten auf verschiedenen Computerauflösungen und Fenstergrößen.

Dies geschieht auch mit meiner Banneranzeige in der Inhaltsbox.

CSS

#logo { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 

HTML

<div id="logo"> 
    <center> 
     <img src="logo.png" alt="Image of Traffic Monsoon"> 
    </center> 
</div> 

The website is here.

Answer 1

<center> ist veraltet so Sie es nicht verwenden.

Um das Problem zu beheben, müssen Sie die img nicht die div

Verwendung margin:auto und display:block zum Zentrum des Bildes anstelle der veralteten center

#logo img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    width: auto; 
 
    margin:auto; 
 
    display:block 
 
}

<div id="logo"> 
 
    <a> 
 
    <img src="http://clubtrafficmonsoon.com/banner.gif" alt="Image of Traffic Monsoon"> 
 
    </a> 
 
</div>

Wenn Sie wollen Ziel Um dies allgemein auf alle Bilder in der Site anzuwenden, tun Sie dies einfach:

Answer 2

Wickeln Sie Ihre ganze Seite in ein <main> Element oder eine wrapper Klasse. Setzen Sie Ihre max-width auf diesem Element, und alle nachfolgenden Elemente können width:100% gesetzt haben.

Answer 3

Bitte versuchen Sie dies:

Zunächst einmal wickeln Sie ganze Seite mit einem div namens Wrapper.

<div class="wrapper">your code here</div> 

Dann gelten diese css unter:

.wrapper { 
    margin: 0 auto; 
    width: 1574px; 
} 

#logo { 
    margin: 0 auto; 
    text-align: center; 
    width: 1331px; 
} 

#logo img{ 
    text-align: center; 
    width: 96%; 
} 

Answer 4

ein Inline-Level-Element zu zentrieren wie <img> Tag, Sie text-align:center; auf den Behälter, mit gutem Beispiel vorangehen können:

#logo { 
 
    text-align: center; 
 
}

<div id="logo"> 
 
    <img src="logo.png" alt="Image of Traffic Monsoon"> 
 
</div>

Außerdem entfernen Sie <center>, es ist veraltet. Und fügen Sie folgende Zeilen das Bild zu machen automatisch zu schrumpfen zu passen, wenn seine innere Breite, die größer ist als der Behälter ist:

#logo img { 
    max-width: 100%; 
    height: auto; 
}