Comment faire pour centrer une image qui est plus large que la fenêtre du navigateur (pas une image d'arrière-plan)

Comment puis-je centre une image de grande taille dans la fenêtre du navigateur, de sorte que, si elle est plus large que la fenêtre, il sera toujours centré?

Voir: http://carolineelisa.com/rob/

Je n'ai pas voulu tout simplement faire de l'image une image d'arrière-plan, comme il change de façon dynamique à des images de tailles différentes et je veux être capable de faire défiler vers le bas pour les voir à la bonne hauteur.

Cependant, je suis ouvert à en faire une image d'arrière-plan si la hauteur de la div conteneur peut changer en fonction de l'image de fond de la hauteur?

Je ne me dérange pas d'avoir une barre de défilement horizontale, mais préfère ne pas le faire.

Merci!

vous pouvez faire cela avec un conteneur qui est en position absolue/fixe avec une largeur et une hauteur de 100%. en arrière-plan peut alors être configuré pour background-position: center center je pense?
Merci @Joseph, cette centres parfaitement mais j'ai peur que il n'y a pas de barre de défilement pour moi de voir la moitié inférieure de l'image.
hm... permettez-moi de mettre une réponse... peut rendre les choses plus faciles.
Voir ma réponse. (oh wow... j'ai presque terminé la sentance avec un point-virgule O_O).
J'ai pris la liberté de reconstruction de votre page pour voir si je ne pouvais pas résoudre le problème et il semble avoir travaillé. Voir mon dernier edit.

OriginalL'auteur Caroline Elisa | 2011-07-28

  1. 17
    <div style="background:url(/path/to/image.png) center top; width:100%; overflow:hidden">
  <img src="/path/to/image.png" style="visibility: hidden;">
</div>

    Ce... sera probablement vous rendre où vous voulez.

    et l'exemple: violon et la source

    Modifier

    fixe: violon et la source

    Yay!!! Merci pour coller le code, cela m'a vraiment aidé.
    +1 belle solution
    Oh, mon chéri, viens de réaliser que la div maintient la hauteur de l'original invisible de l'espace réservé d'image après que j'ai changer de manière dynamique. Donc, je pense que je vais utiliser le javascript pour cela après tout.
    Mon mauvais, d'autres styles d'interférer avec ma version. Merci!

    OriginalL'auteur Joseph Marikle

  2. 10

    Près de deux ans plus tard, j'ai eu un problème similaire et je voulais résoudre avec seulement l'html et le css (à l'aide de javascript que pour changer entre les images).

    Enfin, j'ai eu à résoudre pour un total de trois éléments pour obtenir toujours centré images (images à la fois plus petit et plus grand que la page/l'élément d'habillage).

    Le code html de construction

    <div class="container">
    <div class="align"><img src="http://thecustomizewindows.com/wp-content/uploads/2011/11/bulb-wallpaper.jpg" /></div>
</div>

    Le css:

    div.container
{
    position: relative;
    width: 100%;
    overflow: hidden;
}
div.container div.align
{
    position: relative;
    width: 10000px;
    left: 50%;
    margin: 0 0 0 -5000px;
    text-align: center;
}

    Alors que je n'aime pas vraiment avoir à travailler avec incroyablement tendu éléments, il semble super efficace.

    Voici le violon: http://jsfiddle.net/NjJ3G/3/

    Rogier Spiekers réponse est un bon moyen! Pour une utilisation dynamique, jetez un oeil à jQuerys "wrap()"!
    Bien meilleure solution. J'ai dû bidouiller un peu, car en fait, je voulais overflow-y pour être visible, mais cela m'a aidé énormément. +1
    A bien fonctionné. Pour la page imprimée, ajouter body {margin: 0} pour s'assurer que l'image va réellement à la pointe de la page.
    Version avec du CSS: <div class="container" style="position: relative; width: 100%; overflow: hidden;"> <div class="aligner" style="position: relative; width: 10000px; left: 50%; margin: 0 0 0 -5000px; text-align: center;"> <img src="/wp-content/uploads/2017/02/banner.jpg" /> </div> </div>

    OriginalL'auteur Rogier Spieker

  3. 2

    Honnêtement, la meilleure façon de le faire est avec une image d'arrière-plan. Puisque vous allez être en utilisant javascript pour modifier l'image, vous pouvez aller de l'avant et ajouter un peu plus de modifier la taille ainsi. Pour ce faire, charger l'image dans un div invisible (style="position:absolute; top:-3000px; left:-3000px;") en plus de la définir comme image de fond d'écran. Vous pouvez ensuite utiliser javascript pour obtenir sa hauteur à partir de la balise img dans l'invisible div.

    OriginalL'auteur tybro0103

  4. 2

    Meilleure solution avec un img balise inconnue dimensions :

    .bg-fluid {
    position:absolute;
    left:-1000%;right:-1000%; //horizontal center
    top:-1000%; bottom:-1000%; //vertical center
    margin: auto;
}

    vous pouvez également vous rendre réceptif avec:

    .bg-fluid-responsive {
    min-width: 100%;
    min-height: 100%;
}

    et la img tag:

    <img class="bg-fluid bg-fluid-responsive" src"..."/>

    pas nécessaire pour les conteneurs.

    remarque: les proportions sera préservé.

    OriginalL'auteur Bart Calixto