web-dev-qa-db-fra.com

Comment puis-je remplir une div avec une image tout en la maintenant proportionnelle?

J'ai trouvé ce fil - Comment étirez-vous une image pour remplir un <div> tout en conservant le format de l'image? - ce n'est pas tout à fait ce que je veux.

J'ai un div avec une certaine taille et une image à l'intérieur. Je veux toujours remplir le div avec l'image, qu'il s'agisse d'un paysage ou d'un portrait. Et cela n'a pas d'importance si l'image est coupée (la div elle-même a débordé caché).

Donc, si l'image est en portrait, je veux que la width soit 100% et le height:auto afin qu'elle reste proportionnelle. Si l'image est paysage, je veux que la height soit 100% et le width to beauto`. Cela semble compliqué, non?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

Puisque je ne sais pas comment le faire, j'ai simplement créé une image rapide de ce que je veux dire. Je ne peux même pas le décrire correctement.

enter image description here

Donc, je suppose que je ne suis pas le premier à demander cela. Cependant, je n'ai pas vraiment trouvé de solution à cela. Peut-être y a-t-il une nouvelle façon de faire CSS3 - je pense à flex-box. Une idée? Peut-être que c'est encore plus facile que ce à quoi je m'attendais?

cssimagecss3positioningflexbox
76
matt

Si je comprends bien ce que vous voulez, vous pouvez laisser les attributs de largeur et de hauteur de l'image pour conserver les proportions et utiliser Flexbox pour effectuer le centrage à votre place.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}
<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddle ici

J'ai testé cela avec succès dans IE9, Chrome 31 et Opera 18. Mais aucun autre navigateur n'a été testé. Comme toujours, vous devez tenir compte de vos besoins particuliers en matière de support.

111
Isius

Il est un peu tard mais je viens d'avoir le même problème et finalement résolu avec l'aide d'un autre poste de stackoverflow ( https://stackoverflow.com/a/29103071 ).

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

J'espère que cela aide toujours quelqu'un.

Ps: fonctionne également avec les propriétés hauteur maximale _, largeur maximale, largeur minimale et hauteur minimale css. Il est particulièrement pratique d'utiliser des unités de longueur telles que 100% ou 100vh/100vw pour remplir le conteneur ou la totalité de la fenêtre du navigateur.

31
Hermilton

Une vieille question qui mérite une mise à jour car il existe maintenant un moyen.

La bonne réponse basée sur CSS consiste à utiliser object-fit: cover, qui fonctionne comme background-size: cover. Le positionnement serait pris en charge par l'attribut object-position, qui par défaut est le centrage.

Mais il n'est pas pris en charge par les navigateurs IE/Edge ou Android <4.4.4. De plus, object-position n'est pas pris en charge par Safari, iOS ou OSX. Polyfills existe, object-fit-images semble donner le meilleur support.

Pour plus de détails sur le fonctionnement de la propriété, voir Article sur les astuces CSS sur object-fit pour des explications et une démonstration.

7
holist

Cela devrait le faire:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
5
maksim1

Vous pouvez utiliser div pour y parvenir. sans img tag :) espérons que cela aide.

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
<div class="img">	
</div>
<div class="img1">	
</div>

2
Sivasakthivel Kalaiarasu

Pensez à utiliser background-size: cover (IE9 +) avec background-image. Pour IE8-, il existe un polyfill .

2
Marat Tanalin

Essaye ça:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

J'espère que cela t'aides

2
Landerqvist

Ici vous avez mon exemple de travail. J'ai utilisé une astuce qui consiste à définir l'image en tant qu'arrière-plan du conteneur div avec background-size: cover et background-position: center center.

J'ai placé l'image avec la largeur: 100% et l'opacité: 0, ce qui la rend invisible. Notez que je ne montre mon image que parce que j'ai un intérêt particulier à appeler l'événement de clic enfant.

Veuillez noter que même si j'utilise un angle, cela n'a aucune pertinence. 

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

Le résultat est celui que vous définissez comme optimal dans tous les cas. 

1
Noel Carcases

Vous pouvez y parvenir en utilisant les propriétés css flex. Veuillez consulter le code ci-dessous

.img-container {
  width: 150px;
  height: 150px;
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}
<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

1
Sandeep K Nair

Toutes les réponses ci-dessous ont une largeur et une hauteur fixes, ce qui rend la solution "non réactive".

Pour obtenir le résultat mais garder l’image sensible, j’ai utilisé ce qui suit:

  1. À l'intérieur du conteneur, placez une image gif transparente avec la proportion souhaitée. 
  2. Donnez une image tag inline css background avec l'image que vous souhaitez redimensionner et rogner

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​
0
Artur Klassen

La seule façon pour moi d’atteindre le scénario "optimal" décrit était de placer l’image en arrière-plan:

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​
0
David Nathan

Les valeurs des propriétés CSS object-fit: cover et object-position: left center résolvent maintenant ce problème.

0
James

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
<div class="image-wrapper">
  <img src="">
</div>

0
Yaseen