Image d'échelle basée sur div

Question

Salut J'ai de la difficulté à rendre mon image sensible à la div. Y a-t-il un moyen d'avoir simplement des pièces "coupées" qui ne tiennent pas et qui montrent simplement ce qui se trouve dans la div?

HTML

<div class="col-md-4"> 
     <div style="height:42vh; background-color:#f2f2f2; margin-top:0px; margin-bottom:30px;" > 
     <!--IMAGE DIV--> 
     <div id="imgdiv" style="height:28vh;" class="img-responsive"> 
     </div> 

     <div style="height:14vh; background-color:#1c1818; padding-top:0.95em; padding-left:1.75em; padding-right:1.75em;"><%= link_to event.name, event, 'data-no-turbolink' => true, :style=>"float:left; font-family: 'Roboto' !important; font-size:1.5em; color:white;" %> <br> 
     <div style="float:left; font-family: 'Roboto' !important; font-size:1em; color:white; margin-top:0.15em;"><%= event.start_date.strftime('%B %d, %Y')%><br> 
     <span style="float:left;"><%= event.city%> City</span></div> 
     </div> 

     </div> 
</div> 

CSS

#imgdiv{ 
background-image: url(http://lorempixel.com/500/226/fashion); 
background-repeat: no-repeat; 
background-size: contain; 
} 

J'utilise également bootstrap twitter, mais le class="img-responsive" ne répond pas à mes besoins. Lorsque l'image n'a pas le même rapport d'aspect, il y a un espace vide pour le côté le plus court - il essaie toujours d'ajuster l'image entière à l'intérieur de la div. Y a-t-il un autre moyen d'y parvenir? Dois-je utiliser javascript pour cela? Si oui, comment je vais y aller?

Merci d'avance. :)

Answer 1

Essayez d'utiliser la valeur background-size: cover si vous voulez que l'image d'arrière-plan à l'échelle dans le div selon viewport:

#imgdiv{ 
    background-image: url(http://lorempixel.com/500/226/fashion); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

Si vous voulez que l'image de fond soit simplement "cut-off", vous pouvez essayer de supprimer complètement la propriété background-size ...

Answer 2

utiliser taille de fond: couverture; à la place taille de l'arrière-plan: contient; en CSS, cela va vous aider.

Answer 3

Pour que quelque chose soit sensible à son nœud parent, vous devez lui donner une largeur de 100% et une hauteur automatique.

Exemple css:

img { 
    width: 100%; 
    height: auto; 
} 

Et jsFiddle: https://jsfiddle.net/04mLykqc/

Answer 4

Cela peut être un doublon à une autre question. Mais vérifiez cela. https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

img { 
    object-fit: cover; 
}