Centre d'image en HTML de la fenêtre d'affichage (sans JavaScript)

J'ai une image que je voudrais afficher dans un navigateur tel que:

  1. Si l'image est plus petite que la fenêtre d'affichage du navigateur, l'image est centrée
    horizotally et verticalement.
  2. Si l'image est plus grande que la fenêtre d'affichage, l'image est réduite à remplir
    comme une grande partie de la fenêtre d'affichage que possible sans avoir à ajuster le ratio d'aspect de la
    image. Encore une fois, l'image est centrée horizotally et verticalement.

Je ne souhaitez pas utiliser JavaScript; quel est le meilleur/le plus sémantique HTML et CSS pour ce faire?

Mise à jour j'ai demandé des précisions quant à la sémantique de l'image: l'image est contenu; le seul contenu dans le code HTML.

Solution

@GionaF idées m'a fait un heureux (et très simple) solution:

HTML

<!DOCTYPE html>
<head>
  <title></title>
  <LINK href="test2.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div>
      <img src="photo.jpg" alt="photo" />
    </div>
</body>

CSS

img {
    max-width:100%;
    max-height:100%;
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
}
sans JavaScript? pas possible si vous ne connaissez pas la hauteur et/ou largeur de l'image
CSS n'est pas faite pour traiter if conditions. C'est exactement ce que vous lui dites de faire.
est possible. Juste besoin de solutions de contournement pour IE8 et ci-dessous.

OriginalL'auteur Mike | 2012-09-30

  1. 18

    Vous peut réaliser de plusieurs façons, mais je ne peux pas être "sémantique" sans connaître le contexte (c'est l'image de la principale/uniquement le contenu de la page? est-il au milieu d'un blog?), donc, je vais passer pour un div.

    1. position:absolute; + margin:auto;

    Soutien: crossbrowser

    HTML

    <html>
<body>
    <div id="container">
        <img src="your-image.jpg">
    </div>
</body>
</html>​

    CSS

    html,body,#container {
    height:100%;
}
#container {
    width:100%;
    position:relative;
}
#container > img {
    width:100%;
    max-width:400px; /* real image width */
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
}

    Démo

    2. display:table; + display:table-cell; + vertical-align:middle;

    Soutien: IE8+, tous les autres navigateurs - avec IE7 secours (Source 1) (Deux) (Trois)

    HTML

    <html>
<body>
    <div id="container">
        <span> /* it's important that you use a span here
                  not a div, or the IE7 fallback won't work */
            <img src="your-image.jpg">
        </span>
    </div>
</body>
</html>​

    CSS

    html,body,#container {
    height:100%;
}
#container {
    width:100%;
    display:table;
    *display:block; /* IE7 */
}
#container > span {
    display:table-cell;
    *display:inline-block; /* IE7 */
    vertical-align:middle;
    text-align:center;
}
#container > span > img {
    width:100%;
    max-width:400px; /* real image width */
}

    Démo

    3. background-size:contain;

    Soutien: IE9+, tous les autres navigateurs - avec le fournisseur de préfixes (Source 1) (Deux)

    HTML

    <html>
<body>
    <div id="container"></div>
</body>
</html>​

    CSS

    html,body,#container {
    height:100%;
}
#container {
    margin:0 auto;
    max-width:400px; /* real image width */
    background:url(your-image.jpg) 50% 50% no-repeat;
    background-size:contain;
}

    Démo

    Faire attention à la façon dont IE8 rend height:auto;, ne peut pas garder les proportions.

    Edit: je viens de réaliser que vous avez écrit "sans ajuster le ratio d'aspect de l'image". Si vraiment vous ne voulez pas conserver le ratio, c'est plus facile ... mais pensez-vous vraiment dire que? 

    Merci pour ces je vais pour les essayer. J' vous voulez maintenir le ratio d'aspect. Re: la sémantique de l'image, c'est le contenu, le seul contenu de la page.
    eh bien, un div sera ok 😉 si eux ne fonctionne pas, veuillez ajouter votre code de la page.
    Merci pour votre aide: j'ai moi assez proche de la solution que j'ai maintenant ajouté à la question.

    OriginalL'auteur Giona

  2. 0

    Vous ne serez pas en mesure d'accomplir cela, sauf si vous avez un ensemble de la hauteur du conteneur qui abrite l'image. Pour que la fenêtre d'affichage pour savoir où l'image centrée, il aura besoin de connaître la hauteur totale, vous travaillez avec, comme lieu de rester la même taille que l'image. La hauteur ne fera qu'élargir si il est dit de le faire, ou si il est contenu réel de remplissage.

    Pour centrer horizontalement, vous devez définir un conteneur autour de l'image et de lui donner une marge de '0, auto'. Définir la largeur de l'image à 100% dans le conteneur (cela permet de garder les proportions correctes, à la hauteur de l'échelle de façon appropriée avec elle), et de donner le conteneur d'un pourcentage en fonction de la largeur.

    Merci pour le commentaire. Je ne saurai jamais la taille de l'image ou de la taille de la fenêtre d'affichage à l'avance ... si vous dites que c'est pas possible?
    Corriger, à moins de ne pas l'aspect vertical. La largeur n'est pas un problème avec les navigateurs, mais vous avez vraiment besoin d'avoir les détails de la hauteur verticale, ou le contenu de remplir un espace, sinon le navigateur tronque vers le bas. JS ne vous offrons des solutions pour cela, mais si vous voulez juste le CSS et le HTML, vous aurez besoin de donner plus d'informations sur la taille du contenu.
    FYI - je pense que j'ai accompli; voir la dernière révision à la question.

    OriginalL'auteur schoenburg

  3. 0

    Vous aurez besoin pour donner à votre image ou surround div un ensemble de largeur et de hauteur pour margin: auto pour centrer l'image. Voir comment le code ci-dessous fonctionne pour vous.

    Css

    #container {
width: 1000px;
height: 1000px;
}

#img {
    background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}​

    HTML

    <div id="container">

<div id="img">

</div>

    Modifier

    Définir l'image comme fond?
    Définissez ensuite le corps à 100%.

    body
{
    background-image: url('background.jpg');
    background-repeat: no-repeat; /* you know... don't repeat... */
    background-position: center center; /*center the background */
    background-attachment: fixed; /*don't scroll with content */
}
    Merci, mais ne pas toujours rendre une 100x100px image?
    Oui, j'ai été en utilisant simplement que comme un exemple. Pourriez-vous définir l'image comme fond? J'ai édité le ci-dessus
    Merci Michael - cela ressemble à un bon second choix si ma solution préférée s'avère avoir un encore invisible question.

    OriginalL'auteur Michael

  4. 0

    Je n'étais pas en mesure de trouver une solution parfaite (de ce que j'ai lu il n'est pas possible de faire ce que vous voulez en utilisant uniquement CSS et HTML). Mais j'ai trouvé une solution plus proche de ce que vous avez besoin. Je le répète, il n'est pas parfait. Donc, ici, il va (en fait vous placer votre image comme arrière-plan pour un div):

    #mydiv {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(photo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 98%, cover;
}

    Donc, la clé ici est la background-size de la propriété. Ce qu'il fait ici: la force de l'image à l'échelle (vers le haut ou vers le bas) pour un pourcentage de la largeur ou de la hauteur de la div/conteneur (la largeur et la hauteur de la div est dictée par la fenêtre d'affichage). Pour les images de plus grand que la fenêtre d'affichage, cette solution est bonne, mais le problème est avec les petites images (qui sont mis à l'échelle). Unfortunely, l'application actuelle de la CSS ne permet pas de spécifier un max-height ou max-width pour la background-image. Si vous voulez en lire plus sur ce sujet ouvert cette page: http://www.css3.info/preview/background-size/.

    De toute façon, un JavaScript solution est meilleure. Espérons que cela aide.

    Grâce CodeNighter - cela ressemble à un bon second choix si ma solution préférée s'avère avoir un encore invisible question.

    OriginalL'auteur codenighter