Twitter Bootstrap Question posted in

Twitter bootstrap – Scale image based on div

Hi I am having difficulty making my image responsive to div. Is there a way to simply have css “cut off” parts which do not fit and simply show whatever fits inside the 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;
}

I am also using twitter bootstrap, however the class="img-responsive" does not meet my needs. When the image does not have the same aspect ratio, there is blank space for the shorter side–it always tries to fit the whole image inside the div. Is there another way to go about this? Should I use javascript for this? If so, how do I go about it?

Thanks in advance. 🙂

Tags:

4

Answers


  1. 0

    use background-size: cover; instead background-size: contain; in CSS, It will help you.

    Login or Signup to reply.
  2. 0

    To make something responsive to it’s parent node you must give it width of 100% and auto height.

    Example css:

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

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

    Login or Signup to reply.
  3. 0

    Try using the background-size: cover value if you want the background image to scale within the div according to viewport:

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

    If you want the background image to simply “cut-off”, you can try omitting the background-size property altogether…

    Login or Signup to reply.
  4. 0

    This may be a duplicate to another question. But check this out. https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

    img {
   object-fit: cover;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search