Sujet Précédent Sujet Suivant

Centrer une image à la taille de la fenêtre du navigateur

Résolu/Fermé
MisterGameFR Messages postés 153 Date d'inscription lundi 9 novembre 2015 Statut Membre Dernière intervention 29 mars 2017 - 24 févr. 2016 à 09:05
MisterGameFR Messages postés 153 Date d'inscription lundi 9 novembre 2015 Statut Membre Dernière intervention 29 mars 2017 - 25 févr. 2016 à 23:16
Bonjour,

Je suis débutant dans la programation, j'aimerais centrer une image en plein milieux et pas très bas de ma bannière et quelle s'ajuste en fonction de la taille de la fenêtre.

J'ai chercher pas mal de fois et je ne troue absolument rien :/ ( qui peux m'aidez )

Avez vous une solution ?

Voici mon code HTML / CSS 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Wolrd Fitness</title>
    <link rel="stylesheet" href="index.css">
</head>
    
    <body>
        
        <div id="banner1"></div>
        <div><img src="fw2.png" style="height: 200px; width: 250px" class="logo"></div>
        <div><img src="fwm.png" style="height: 450px; width: 500px" class="logo2"></div>
    
    </body>
</html>


body {
    background-color: #ffffff;
    margin: 0;
}

/* Banniere du haut */


#banner1 {
    
    display: block;
    background-color: #c55353;
    height: 150px; 
    width: auto; 
    box-shadow: 0px 5px 15px black;
}

.logo {
    
    background-attachment: fixed; 
    display: block; 
    margin-left: 5px;
    margin-top: -170px; 
    
}

.logo2 {
    
    max-width: 100%;
    height: auto ;
}



Voici le résultat actuel



je vous remercie d'avance !
Bonne journée.

A voir également:

6 réponses

Réponse 1 / 6
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
24 févr. 2016 à 09:52
Salut,

j'aimerais centrer une image en plein milieux et pas très bas de ma bannière

Peux tu nous donner un peu plus de précision ? Une image de ce que tu souhaites ?

Concernant le premier logo, il serait plus correct de placer la balise img dans le div banner1 et du supprimer la marge négative de l'image.

Bonne journée
0
Réponse 2 / 6
MisterGameFR Messages postés 153 Date d'inscription lundi 9 novembre 2015 Statut Membre Dernière intervention 29 mars 2017
Modifié par MisterGameFR le 24/02/2016 à 09:56
Comment ça pour le logo ?

Voici le résultat final que j'aimerais.
0
Réponse 3 / 6
MisterGameFR Messages postés 153 Date d'inscription lundi 9 novembre 2015 Statut Membre Dernière intervention 29 mars 2017
24 févr. 2016 à 20:34
Toujours pas de réponse à mon sujet ?? SVP !
0
Réponse 4 / 6
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
25 févr. 2016 à 09:49
Un début de solution possible : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style>
            html {
                height: 100%;
            }

            body {
                height: 100%;
                background-color: #ffffff;
                margin: 0;
            }

            #banner1 {
                /* display: block; -> les div sont des block par défaut */
                background-color: #c55353;
                height: 150px;
                /* width: auto; -> les div prennent toute la largeur par défaut */
                box-shadow: 0px 5px 15px black;
            }

            .logo {
                /* background-attachment: fixed; -> pas de background */
                /* display: block; -> les div sont des block par défaut */
                margin-left: 5px;
                /* margin-top: -170px; -> pas besoin de marge négative si on place le logo dans le div #banner1 */
            }

            .main {
                height: calc(100% - 150px);
                text-align: center;
                font: 0/0 a;
            }

            .main:before {
                content: ' ';
                display: inline-block;
                vertical-align: middle;
                height: 100%;
            }

            .responsive-image {
                display: inline-block;
                vertical-align: middle;
                font: 16px/1 Arial sans-serif;
                width: 60%;
                max-width: 500px;
            }

            .responsive-image:after {
                padding-top: 100%;
            }
        </style>
    </head>
    <body>
        <div id="banner1">
            <img src="https://placehold.it/200x150" class="logo">
        </div>

        <div class="main">
            <img src="https://placehold.it/500x450" class="responsive-image">
        </div>
    </body>
</html>


Plus d'explications ici : https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height
0
MisterGameFR Messages postés 153 Date d'inscription lundi 9 novembre 2015 Statut Membre Dernière intervention 29 mars 2017
25 févr. 2016 à 20:01
Merci de ton aide Pitet,

Mais je ne comprend absolument pas ton code.. Serait-il possible que tu me fasse le côté HTML et le côté CSS ?

Merci beaucoup en tout cas !
0
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
25 févr. 2016 à 20:15
lut;)
tu as toutes les explications ET code, CSS et html, sur le lien donné plus haut, juste prendre le temps de le lire ;)
avec bien d'autres liens comme celui-ci, par exemple :
http://jsfiddle.net/hashem/46psK/4/
0
MisterGameFR Messages postés 153 Date d'inscription lundi 9 novembre 2015 Statut Membre Dernière intervention 29 mars 2017 > bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024
25 févr. 2016 à 20:24
Merci Bg62,

Je n'avais pas fait attention au lien ! :O

Merci ! Je vais vérifier ça de plus prêt et je reviendrais pour donner un retour d'aperçu.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
MisterGameFR Messages postés 153 Date d'inscription lundi 9 novembre 2015 Statut Membre Dernière intervention 29 mars 2017
25 févr. 2016 à 20:37
Je suis de retour après mon essaye ^^

Donc, le bon côté c'est que c'est centrer ! peux importe la taille de la fenêtre, le problème c'est que j'ai un contour noir et l'image est trop basse quand je la met en pleine ecran .. Voir image :

0
ratapignata
25 févr. 2016 à 22:14
Salut,
comme les dimensions de l'écran varient d'un écran (résolution d'affichage) à l'autre il faut que vous mettiez les dimensions dans une valeur relative comme le % et non une valeur fixe (ex: 200px) qui va dépendre chez chacun du nombre de pixel sur l'écran. La majorité des utilisateurs du web consultant celui ci à partir de smartphone ou tablette l'affichage sera probablement différent pour le support ordinateur de bureau qu'un support de média portable. C'est là qu'interviens le 'responsive design' qui va s'adapter comme dans l'exemple qu'on va à fournit.

Le positionnement il y a différentes façons de faire avec CSS.
Ici on utilise les marges externes(margin) d'un élément pour positionner celui ci par rapport aux éléments adjacents:
.
logo {
                /* background-attachment: fixed; -> pas de background */
                /* display: block; -> les div sont des block par défaut */
                margin-left: 5px;
                /* margin-top: -170px; -> pas besoin de marge négative si on place le logo dans le div #banner1 */
            }

et ici les marges internes(padding) pour positionner dans l'élément: 

            .responsive-image:after {
                padding-top: 100%;
            }


N'hésitez pas à changer les valeurs pour obtenir ce que vous voulez et à regarder la description des propriétés CSS que vous ne connaissez pas pour voir leur utilité et changer les paramètres si besoin.

https://www.google.fr/search?q=liste+des+propriétés+css
0
MisterGameFR Messages postés 153 Date d'inscription lundi 9 novembre 2015 Statut Membre Dernière intervention 29 mars 2017 > ratapignata
25 févr. 2016 à 23:15
D'accord,

Je vous remercie à tous ! j'ai un peux touché à tout comme ont dit.
J'ai fini par trouver le bon code pour le placer correctement.

Donc je vous remercie !
Passez une agréable soirée !

MERCI :D
0
Réponse 6 / 6
MisterGameFR Messages postés 153 Date d'inscription lundi 9 novembre 2015 Statut Membre Dernière intervention 29 mars 2017
25 févr. 2016 à 23:16
Pour celui qui aimerais avoir mon code le voici !

HTML : 


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Wolrd Fitness</title>
    <link rel="stylesheet" href="index.css">
</head>
    
    <body>
        
        <div id="banner1"></div>
        <div><img src="fw2.png" style="height: 200px; width: 250px" class="logo"></div>
        
        <div class="responsive-container">     
        <div class="dummy"></div>
        <div class="img-container">
        <div class="centerer"></div>
        <img src="fwm.PNG" alt ="" /> 
        </div>
        </div>
    
    </body>
</html>



CSS : 


body {
    background-color: #ffffff;
    margin: 0;
}

/* Banniere du haut */


#banner1 {
    
    display: block;
    background-color: #c55353;
    height: 150px; 
    width: auto; 
    box-shadow: 0px 5px 15px black;
}

.logo {
    
    background-attachment: fixed; 
    display: block; 
    margin-left: 5px;
    margin-top: -170px; 
    
    
/*///////////////////////////////////  
    
            LOGO FW CENTRER
    
///////////////////////////////////*/ 
    
    
}

.responsive-container {
    position: relative;
    width: 100%;
    border: 0px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container .centerer {
    display: inline-block;
    vertical-align: middle;
    height: 30%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses