web-dev-qa-db-fra.com

image centrale en div avec débordement caché

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

Remarque: je dois conserver le position:absolute sur l'image. Je travaille avec css-transitions, et si j'utilise position:relative, mon image tremble un peu ( https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/ ).

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

htmlcsscenter
27
Puyol

Vous devez rendre le conteneur relatif et lui donner également 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/

25
Jaap

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

21
Simon G

Trouvé ce Nice solution 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%;
}

Centrez n'importe quelle image de taille en div
Utilisé avec un emballage arrondi et des images de différentes tailles.

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

6
Egle Kreivyte
<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>
2
Elham

vous devez corp votre image des côtés pour le cacher essayez ceci

techniques CSS simples et rapides pour le recadrage de fausses images | Css ...

l'une des démo pour la première façon sur le site ci-dessus

essayez la démo

je ferai aussi de la lecture dessus

1
shareef

assurez-vous simplement de la façon dont vous utilisez l'image via l'arrière-plan CSS. Utilisez la position de l'image d'arrière-plan comme l'arrière-plan: url (votre chemin d'image) centre sans répétition; automatiquement, il alignera le centre sur l'écran.

1
Gopikrishna

cela semble fonctionner sur notre site, en utilisant vos idées et un peu de mathématiques basées sur le bord gauche de la div wrapper. Il semble redondant d'aller à gauche de 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>
1
dhaupin

J'ai essayé d'implémenter la réponse de Jaap à l'intérieur 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 recherche une solution pour synchroniser la hauteur de l'image avec l'élément de texte flottant gauche, mais uniquement au cas où ma hauteur de texte deviendrait supérieure à 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 d'origine ci-dessus. Cela peut-il être fait? Vous pouvez simuler le comportement en réduisant lentement la largeur du navigateur.

0
makani photography

Solution la plus récente:

HTML

<div class="parent">
    <img src="image.jpg" height="600" width="600"/>
</div>

CSS

.parent {
    width: 200px;
    height: 200px;
    overflow: hidden;
    /* Magic */
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}
0
GilCarvalhoDev

Ce problème est une énorme douleur dans le a .. mais je l'ai finalement compris. J'ai vu beaucoup de solutions compliquées. C'est tellement 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;
}
0
pac

Pour moi, la flex-box fonctionnait parfaitement pour centrer l'image.

voici mon code html:

<div class="img-wrapper">
  <img src="..." >
</div>

et ceci j'ai utilisé pour css: je voulais que l'image soit aussi large que l'élément wrapper, mais si la hauteur est supérieure à la hauteur de l'élément wrapper, elle devrait être "recadrée"/non affichée.

.img-wrapper{
  width: 100%;
  height: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}
img {
  height: auto;
  width: 100%;
}
0
lisa-bob