Comment rendre votre séjour logo centré et rétrécir pour s'adapter comme navigateur redimensionnées

Question

Essayer ici: http://alternativegrow.com.au/

pour faire le logo rester centré et psy pour adapter comme redimensionnée navigateur (au lieu de se couper). J'ai suivi un certain nombre de techniques recommandées mais en vain ...

Je suis un peu incertain quels éléments que j'ai ajoutés ou modifiés aident ou entravent.

Ce que j'ai ajouté, brancher via css personnalisé dans pour l'instant:

.header-image .site-title > a { 
    float: left; 
    max-width: 100%; 
    height: auto; 
    background-size: 100% auto !important; 
    background-position:center; 
} 

    .title-area { 
    float: left; 
    padding: 10px 0; 
} 

.site-header .wrap { 
    padding: 10px 0; 
} 

Ce qui est en stylesheet:

/* ## Title Area 
--------------------------------------------- */ 

.title-area { 
    float: left; 
    padding: 10px 0 10px 15px; 
    width: 360px; 
} 

.header-full-width .title-area { 
    width: 100%; 
} 

.site-title { 
    font-size: 24px; 
    font-weight: 400; 
    line-height: 1.2; 
} 

.site-title a, 
.site-title a:hover { 
    color: #fff; 
} 

.header-image .site-title > a { 
    background: url(images/logo.png) no-repeat left; 
    float: left; 
    min-height: 160px; 
    width: 350px; 
} 

.site-description { 
    font-size: 16px; 
    font-weight: 300; 
    line-height: 1.5; 
} 

.site-description, 
.site-title { 
    margin-bottom: 0; 
} 

.header-image .site-description, 
.header-image .site-title { 
    display: block; 
    text-indent: -9999px; 
} 

.site-description { 
    color: #fff; 

modifier - Oh, j'ai essayé requêtes des médias, mais ils ne l'ont pas non plus travail. Plus précisément, j'ai essayé d'ajuster la hauteur minimale à différents points de bec, avec la largeur définie comme automatique, en s'attendant à ce que la largeur soit ajustée par rapport au réglage de la hauteur, mais en fait le logo disparaissait quand je l'ai fait. Je ne veux pas vraiment utiliser des logos de tailles multiples pour divers points de rupture car cela me semble maladroit, mais c'est mieux que ce qui est ici, mais cela n'a pas fonctionné pour moi.

Answer 1

Vous ne savez pas si l'exemple que vous indiquez correspond à ce que vous essayez de réaliser ou à ce que vous essayez de modifier.

Peut-être que ce example peut vous aider

Les parties importantes sont:

1) pour rendre l'élément qui tient le logo en arrière-plan prendre tout l'espace disponible

2) définir la Background- taille à 'contenir'

<header> 
    <div class="logo"></div> 
</header> 

.logo{ 
    background:url('http://www.vectortemplates.com/raster/batman-logo-big.gif') no-repeat center; 
    width: 100%; 
    height: 100%; 
    background-size:contain; 
} 

header{ 
height:200px; 
}