Comment puis-je centre une image si elle est plus large que son contenant?

Normalement, vous de centre images avec display: block; margin: auto, mais si l'image est plus grande que le conteneur, il déborde à droite. Comment puis-je faire déborder sur les deux côtés de la même manière? La largeur du conteneur est fixe et connu. La largeur de l'image est inconnue.

InformationsquelleAutor CannibalSmith | 2010-07-21
  1. 17

    HTML 

    ​<div class="image-container">
  <img src="http://www.google.com/images/logo.gif" height="100" />
</div>​

    CSS 

    .image-container {
    width: 150px;
    border: solid 1px red;
    margin:100px;
}

.image-container img {
    border: solid 1px green;
}

    jQuery

    $(".image-container>img").each(function(i, img) {
    $(img).css({
        position: "relative",
        left: ($(img).parent().width() - $(img).width()) / 2
    });
});

    Voir sur jsFiddle: http://jsfiddle.net/4eYX9/30/

    • Solution parfaite pour moi, cela a vraiment fait ma journée, j'ai juste ajouté la même logique sur la hauteur et donc il va correspondre à tous mon cas jsfiddle.net/4eYX9/152
    InformationsquelleAutor jessegavin
  2. 103

    Un pur css solution

    Nécessitant un adaptateur supplémentaire (testé dans FireFox, IE8, IE7):

    Amélioration De La Réponse

    Il y avait un problème avec l'original de la réponse (ci-dessous). Si l'image est plus grande que le conteneur qui outer est centrée sur avec lui de l'auto de marges, puis il tronque l'image sur la gauche et crée excessive de l'espace sur la droite, comme ce violon montre.

    On peut résoudre que par flottante inner à droite puis de centrage de la droite. Cette tronque toujours la img hors de la page à gauche, mais il le fait explicitement le poussant de cette façon et puis les centres de back-off de cette, dont la combinaison est ce qui empêche la supplémentaire de défilement horizontale sur la droite. Maintenant nous avons seulement obtenir autant de défilement de droite que nous avons besoin pour voir la partie droite de l'image.

    Violon Exemple (Les frontières de violon sont pour la démonstration seulement.)

    Essentiel CSS

    div.outer {
    width: 300px; /* some width amount needed */
    margin: 0 auto; 
    overflow: visible;
}
div.inner {
    position:relative;
    float: right; /* this was added and display removed */
    right: 50%;
}
div.inner img {
    position: relative; 
    right:-50%; /* this was changed from "left" in original */
}

    Si vous désirez pas de défilement de droite à l'échelle des images

    Puis à l'aide de la ci-dessus, également en ce que l'élément enveloppements outer (comme corps ou un troisième wrapper) pour avoir overflow: hidden.

    Idée originale (pour l'Histoire)

    Violon Exemple (Les frontières de violon sont pour la démonstration seulement.)

    HTML

    <div class="outer">
    <div class="inner">
        <img src="/yourimage.png">
    </div>
</div>

    CSS

    div.outer {
    width: 300px; /* some width amount needed */
    margin: 0 auto; 
    overflow: visible;
}
div.inner {
    display: inline-block; 
    position:relative; 
    right: -50%;
}
div.inner img {
    position: relative; 
    left:-50%; 
}
    • +1 - brillant. Est float: left nécessaire .inner style?
    • Non, il n'est pas comme une question de fait. Je vais modifier cela.
    • Cependant, pour la nouvelle version révisée de la solution, le float: right est nécessaire.
    • (+1) @ScottS: par hasard, avez-vous travaillé à un centrage vertical équivalent??
    • Fonctionne très bien! La seule chose que je voudrais ajouter, c'est un div avec une 'classe' à la fin pour effacer à la fois --- .clear {clear:both;} et <div class="clear"></div>
    • C'est la meilleure méthode. Ce devrait être acceptée comme la meilleure réponse
    • Merci une tonne pour cette! C'était vraiment utile pour moi.
    • Pour mes propres fins, je bifurquais votre violon pour le mettre à l'épreuve à l'aide d'une fonction animate. Il tient très bien! Merci! jsfiddle.net/hSNBT
    • J'ai essayé verticalement avec bottom et top mais il ne fonctionne pas. j'ai donc utilisé margin-top:50%' in intérieure " et margin-top:-50% dans img et a travaillé dans de nouveaux chrome. vous pouvez essayer avec d'autres navigateurs
    • Cette question et la réponse était seulement pour le centrage horizontal, verticale serait une autre affaire. Pour info, si vous êtes l'un de la conception de la page web, vous doit probablement le tester dans d'autres navigateurs pour être sûr qu'il va donner à vos utilisateurs la meilleure expérience.
    • 1 - vous = vous tous, et de ne pas vous Scott. Vous pouvez en tester d'autres navigateurs si vous avez besoin d'une solution verticale ainsi. 2 - Faust demandé un "vertical equivalent" (et probablement la plupart des autres développeurs qui ont obtenu ici), donc je vais vous dire ce que j'ai fait
    • REMARQUE: Si vous mettez explicite des dimensions sur l'image elle-même (par exemple. pour responsive design), vous aurez également besoin d'appliquer ces mêmes dimensions (la largeur) de la .inner classe autrement, à savoir l'image ne sera pas centré.
    • Je sais que c'est super vieux, mais j'ai mis un simple stylo ensemble: codepen.io/daveobriencouk/stylo/Xmzrdw
    • Pour info: votre codepen utilise l'idée originale de la technique, plutôt que la version améliorée de la réponse.
    • Vous avez raison, désolé, ça a été une longue semaine. J'ai mis à jour ce stylo pour refléter cette réalité, je viens de remarquer vos violons de la prise de ces stylos un peu redondant. De toute façon, votre solution est excellente, merci.
    • comment se fait-cela ne fonctionne plus - au moins dans google Chrome. La barre de défilement horizontale est de retour !
    • que diriez - width: 100% et overflow: hidden ? jsfiddle.net/WAxn3/226 - Vous devez également supprimer border, ou changer pour outline
    • href="http://jsfiddle.net/WAxn3/6/" >Mon violon semble fonctionner très bien pour moi sur Chrome. Il vous manque le point de mon violon, je pense, se basant sur le "fixes". Le but de cette réponse, c'est pour centrer une image dans un conteneur petits que l'image elle-même. Donc, mon width: 300px et bordure rouge sont montrant le petit conteneur dans mon violon, et de montrer que l'image est centrée sur elle. Maintenant, je suis l'obtention de certaines incohérences dans les problèmes avec la barre de défilement horizontale en Chrome pour mon violon, parfois, de ses spectacles, parfois pas). J'ai donc besoin de savoir si je peux le résoudre.
    • Scratch, je n'ai pas de barre de défilement horizontale des questions. Je regardais le violon qui n'ont pas la overflow: hidden ensemble, mais vous remarquerez dans ma réponse que j'adresse à l'aide de overflow: hidden sous "Si vous désirez aucun de défilement de droite à l'échelle des images" juste en dessous de mon css pour éliminer tout de défilement de l'image.
    • OK je l'ai! désolé j'ai raté cette partie. Comme vous pouvez le voir, j'ai utilisé cette réponse il y a des mois et en revenant à elle pour autre chose, j'ai vu ce problème pour la première fois de façon craint que ce soit un navigateur 'régression'. Il semble fonctionner à mettre width: 100% sur "l'extérieur", même si avec caché, pas besoin de toucher le parent aussi loin que je peux voir. Semble être de travailler avec une image beaucoup plus large que mon écran. Merci de prendre le temps de vérifier 🙂
    • Est-il possible d'ajouter cette approche dans cet exemple: codepen.io/osnysantos/stylo/LbvEML ? Où je tente de centrer une image dans un lien avec une certaine largeur. @ScottS
    • C'est un peu pas clair ce que vous avez besoin centré dans l'exemple. Vos images, il semble contrôler la largeur de la a (comme ils le devraient), de sorte que vous n'aurez pas une image "plus large que son conteneur" que cette solution est pour, correct?
    • codepen mis à jour! veuillez noter que la première image n'est pas aligné, car il est plus large que le div parent. Je viens de créer un wrapper div pour essayer d'obtenir cette image aligner avec mes éléments de la liste. Mais je ne suis pas sûr que c'est nécessaire. Je voudrais obtenir ma liste horizontale (à l'incertitude de la largeur, cela dépendra de texte) pour amener l'enfant (<img>) centré avec elle. S'il vous plaît regarder cette image pour savoir exactement de quoi je parle: d17oy1vhnax1f7.cloudfront.net/items/0w1p040T1k3P3R0C0p2t/... c'est ça, l'image peut être plus large ou étroite que mon élément de la liste.
    • Je pense que votre problème sera le "face à l'incertitude sur la largeur, il dépendra de texte" de la déclaration. Le CSS seule solution ici nécessite un ensemble width sur l'élément extérieur (div.outer dans mon exemple), ce qui signifie essentiellement un ensemble de largeur sur votre a élément. Je pense que pour n'importe quel flexible de la largeur de solution, vous devrez utiliser les l'un des javascript solutions.
    • Grande technique, fonctionne comme un charme. Pour d'autres, qui ont besoin d'ajouter plus de nœuds enfants, vous pourriez avoir besoin pour clear flottante première vu ici. Ainsi, il peut s'afficher correctement.
    • Grande technique, fonctionne comme un charme. Pour d'autres, qui ont besoin d'ajouter plus de nœuds enfants, vous pourriez avoir besoin pour clear flottante première vu ici. Ainsi, il peut s'afficher correctement.

    InformationsquelleAutor ScottS
  3. 35

    Voici un 2 ligne de CSS solution (quelques lignes qui pourraient être nécessaires pour la croix-prise en charge du navigateur):

    img {
    margin-left: 50%;
    transform: translateX(-50%);
}
    • des œuvres pour le vertical align ainsi... joli!
    InformationsquelleAutor Sasha
  4. 6

    Alternative pure CSS solution est d'utiliser transform attribut:

    HTML: 

    <div class="outer">
    <img class="image" src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>

    CSS:

    .outer {
    position: relative;
    width: 100px;
    border: 1px solid black;
    height: 150px;
    margin-left: 100px; /* for demo */
    /* overflow: hidden; */
}

img.image {
    width: 200px;
    opacity: 0.7;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

    Violon

    Juste pour ajouter un overflow:hidden parent div pour masquer la zone supplémentaire de l'image.

    InformationsquelleAutor fuermosi777
  5. 4

    Votre meilleur pari est de le définir comme image d'arrière-plan du conteneur à la place.

    #container {
    background: url('url/to/image.gif') no-repeat center top;
}
    • Arrière-plan ne peut pas déborder.
    • apparemment, vous le faites mal.
    • Non, vous. jsfiddle.net/GuzDU/1
    • ah, je comprends maintenant ce que tu voulais dire avec ton "ne peut pas" dépassement". C'est certain, vous ne voulez que le débordement de l'être visible. Non, ce n'est en effet pas possible avec uniquement du CSS image d'arrière-plan. Il est seulement utile lorsque vous souhaitez avoir sur un <body>.
    InformationsquelleAutor BalusC
  6. 3

    En fait il est plus simple pur css/html façon (sans grand défilement horizontale) :

    Html :

    <div class="outer">
  <img src="/my/sample/image.jpg">
</div>

    Css :

    Si vous ne voulez pas voir l'image de débordement

    div.outer img {
    position: absolute;
    left: -50%;
    z-index:-1;
}
div.outer {
    overflow: hidden;
    position: relative;
    height: 200px;
}

    Avec l'image de débordement visible

    div.outer img {
    position: absolute;
    left: -50%;
    z-index:-1;
}
div.outer {
    overflow: visible;
    position: relative;
    height: 200px;
}
body, html {
    overflow-x:hidden;
}

    Un fond solution avec l'image de débordement visible :

    Html :

    <div class="outer">
  <div class="inner"></div>
</div>

    Css :

    div.outer {
    width: 100%;
    height: 200px;
}
div.inner {
    background: url('/assets/layout/bg.jpg') center no-repeat;
    position: absolute;
    left: 0;
    width: 100%;
    height: inherit;
}

    en supposant extérieur est d'une largeur conteneur spécifié.

    InformationsquelleAutor Noémien Kocher
  7. 2

    Je ne peux que penser à une solution d'activer Javascript depuis ce que vous devez faire est relativement position de l'image d'un montant négatif à la gauche de son conteneur:

    jQuery

    $(document).ready(function(){

    var theImg = $('#container img');
    var theContainer = $('#container');
    if(theImg.width() > theContainer.width()){
        theImg.css({
            position: 'relative',
            left: (theContainer.width() - theImg.width()) / 2
        })
    }
})
    InformationsquelleAutor Pat
  8. 0

    J'ai trouvé ceci pour être une solution plus élégante, sans flex, semblable à quelque chose au-dessus, mais plus généralisée (s'applique à la fois verticale et horizontale):

    .wrapper {
    overflow: hidden;
}
.wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 100%; */ /* optional */
}
    InformationsquelleAutor Cezar D.
  9. -1

    Je ne pense pas qu'il y est un pur CSS solution (Sauf pour la prochaine réponse :)). Cependant, avec Javascript, il serait juste une question de trouver la largeur de l'image, en soustrayant de la largeur du conteneur, en divisant par deux et vous avez la gauche du conteneur dont vous avez besoin.

    InformationsquelleAutor qw3n