Mise à l'échelle d'une image centrée avec la taille de la fenêtre

Question

img.logo { 
    height: auto; 
    width: auto\9; /* ie8 */ 
    left: 50%; 
    margin-top: -250px; 
    margin-left: -134px; 
    position: absolute; 
    top: 50%; 
    resize: both; 

C'est le code que j'utilise. C'est une combinaison de redimensionnement et de centrage, et pourtant c'est seulement centré pour une raison quelconque. J'ai besoin de l'image à l'échelle parce que, comme c'est le cas actuellement, il se chevauche avec un élément supérieur de la page à de très petites tailles de navigateur.

Answer 1

Vous pouvez essayer d'utiliser les requêtes des médias CSS. Fondamentalement, nous définissons des points d'arrêt en fonction de la largeur de l'écran/de la largeur du navigateur et ajustons les largeurs d'image en conséquence.

img { 
    width: auto; 
    height: auto; 
} 
@media all and (max-width: 600px) { 
    img { width: 500px; } 
} 
@media all and (max-width: 500px) { 
    img { width: 400px; } 
} 
@media all and (max-width: 400px) { 
    img { width: 300px; } 
} 
@media all and (max-width: 300px) { 
    img { width: 200px; } 
} 
@media all and (max-width: 200px) { 
    img { width: 100px; } 
} 

See this example

Espérons que cela peut répondre à vos besoins

EDIT: Vous pouvez même combiner la suggestion ci-dessus avec transform: translateX(-50%) translateY(-50%); de garder l'image centrée en tout temps. Par exemple:

img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: auto; 
    height: auto; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
} 
@media all and (max-width: 600px) { 
    ... 
} 
... 

Here's an example

Answer 2

Utilisez un% simple pour implémenter la largeur et la hauteur de l'image et le reste prendra automatiquement en charge. Je crois que le chevauchement est dû au fait que l'image essaie de maintenir des proportions avec l'attribut automatique.

Ou bien vous pouvez essayer quelque chose comme ça dans css

img.resize{ 
    width:60%; /* Use either % or px*/ 
    height: auto; 
}