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/
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/
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
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
<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>
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
je ferai aussi de la lecture dessus
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.
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>
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.
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 */
}
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;
}
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%;
}