Масштабное изображение на основе div

Question

Привет, У меня возникли трудности с отображением моего образа в div. Есть ли способ просто отключить css «отрезать» части, которые не подходят, и просто показать все, что подходит внутри 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; 
} 

Я также использую Twitter Bootstrap, однако class="img-responsive" не отвечает моим потребностям. Когда изображение не имеет одинакового соотношения сторон, пустое место для более короткой стороны - оно всегда пытается подогнать все изображение внутри div. Есть ли еще один способ сделать это? Должен ли я использовать javascript для этого? Если да, то как мне это сделать?

Заранее спасибо. :)

Answer 1

Попробуйте использовать значение background-size: cover, если вы хотите, чтобы фоновое изображение для масштабирования в пределах DIV согласно видовом:

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

Если вы хотите, чтобы фоновое изображение просто «отключилось», вы можете попробовать исключить свойство background-size ...

Answer 2

размер фона: обложка; вместо background-size: содержать; в CSS, это поможет вам.

Answer 3

Чтобы сделать что-то отзывчивое к его родительскому узлу, вы должны дать ему ширину 100% и автоматическую высоту.

Пример CSS:

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

И jsfiddle: https://jsfiddle.net/04mLykqc/

Answer 4

Это может быть дубликат другого вопроса. Но проверьте это. https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

img { 
    object-fit: cover; 
}