image centrale dans div avec débordement caché

Question

image centrale dans div avec débordement caché

J'ai une image de 400px et une div qui est plus petit(la largeur n'est pas toujours 300px comme dans mon exemple). Je veux centrer l'image dans la div, et s'il y a un débordement, le cacher.

Remarque: je dois garder la position:absolute sur l'imgage. Je travaille avec des transitions css, et si j'utilise position: relative, mon image tremble un peu ( http://bit.ly/MaYbMB ).

Jsfiddle http://jsfiddle.net/wjw83/1/

23

center css html

demandé sur Puyol 2012-05-31 13:20:45

9 réponses

score 22 · Answer 1

Vous devriez rendre le conteneur relatif et lui donner une hauteur et vous avez terminé.

Http://jsfiddle.net/jaap/wjw83/4/

.main {
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  height: 200px;
}

img.absolute {
  left: 50%;
  margin-left: -200px;
  position: absolute;
}

<div class="main">
  <img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />

Si vous le souhaitez, vous pouvez également centrer l'image verticalement en ajoutant une marge négative et une position supérieure: http://jsfiddle.net/jaap/wjw83/5/

score 20 · Answer 2

Aucune des solutions ci-dessus ne fonctionnait bien pour moi. J'avais besoin d'une taille d'image dynamique pour tenir dans un conteneur parent circulaire avec overflow:hidden

.circle-container {
    width:100px;
    height:100px;
    text-align:center;
    border-radius:50%;
    overflow:hidden;
}

.circle-img img {
  min-width:100px;
  max-width:none;
  height:100px;
  margin:0 -100%;
}

Exemple de travail ici: http://codepen.io/simgooder/pen/yNmXer

score 2 · Answer 3

<html>
<head>
<style type="text/css">
    .div-main{
        height:200px;
        width:200px;
        overflow: hidden;
        background:url(img.jpg) no-repeat center center
    }
</style>
</head>
<body>
    <div class="div-main">  
    </div>
</body>

score 2 · Answer 4

Trouvé cette belle sollution par MELISSA PENTA

HTML

<div class="wrapper">
   <img src="image.jpg" />
</div>

CSS

div.wrapper {
  height:200px;
  line-height:200px;
  overflow:hidden;
  text-align:center;
  width:200px;
}
div.wrapper img {
  margin:-100%;
}

Centre toute image de taille dans div
Utilisé avec l'emballage arrondi et différentes images de taille.

CSS

.item-image {
    border: 5px solid #ccc;
    border-radius: 100%;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    overflow: hidden;
    text-align: center;
}
.item-image img {
    height: 200px;    
    margin: -100%;
    max-width: none;
    width: auto;    
}

Exemple de travail ici codepen

score 1 · Answer 5

Assurez-vous simplement comment vous utilisez l'image via l'arrière-plan CSS utilisez la position de l'image backgroud comme arrière-plan: url (votre chemin d'image) centre sans répétition centre; automatiquement il alignera le centre à l'écran.

score 1 · Answer 6

Cela semble fonctionner sur notre site, en utilisant vos idées et un peu de mathématiques basées sur le bord gauche de wrapper div. Il semble redondant d'aller à gauche 50% puis de retirer 50% de marge supplémentaire, mais cela semble fonctionner.

div.ImgWrapper {
    width: 160px;
    height: 160px
    overflow: hidden;
    text-align: center;
}

img.CropCenter {
    left: 50%;
    margin-left: -100%;
    position: relative;
    width: auto !important;
    height: 160px !important;
}

<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>

score 1 · Answer 7

Vous devez corp votre image de côtés pour le cacher essayez ceci

3 Techniques CSS faciles et rapides pour le recadrage D'image Faux / Css ...

Une des démo de la première façon sur le site ci-dessus

Essayez la démo

Je vais faire quelques lectures à ce sujet aussi

score 0 · Answer 8

J'ai essayé d'implémenter la réponse de Jaap dans cette page de mon site récent, avec une différence : le .main {height:} a été défini sur auto au lieu d'une valeur px fixe. En tant que développeur réactif, je suis à la recherche d'une solution pour synchroniser la hauteur de l'image avec l'élément de texte flottant gauche, mais seulement dans le cas où ma hauteur de texte devient plus grande que ma hauteur d'image réelle. Dans ce cas, l'image ne doit pas être redimensionnée, mais recadrée et centrée comme décrit dans la question originale ici surtout. Cela peut-il être fait ? Vous pouvez simuler le comportement en réduisant lentement la largeur du navigateur.

score 0 · Answer 9

Cette question est une énorme douleur dans le.. mais j'ai finalement obtenu. J'ai vu beaucoup de solutions compliquées. C'est si simple maintenant que je le vois.

.parent {
  width:70px;
  height:70px;
}

.child {
  height:100%;
  width:10000px; /* Or some other impossibly large number */
  margin-left: -4965px; /* -1*((child width-parent width)/2) */
}

.child img {
  display:block; /* won't work without this */
  height:100%;
  margin:0 auto;
}

Las etiquetas más populares

image centrale dans div avec débordement caché

9 réponses