• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 515
  • Last Modified:

Bootstrap - stretch hero images

How do I stretch the hero image (big pic to right of nav) so it fits the largest desktop size?  We got the animation to work good but that is only be on the home page.  

I played around with this on the below page:

http://nsitedesigns.com/nsitedesigns/wiplastic_scott/about2.html
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/wiplastic2.css
0
nsitedesigns
Asked:
nsitedesigns
  • 4
  • 2
  • 2
1 Solution
 
nsitedesignsAuthor Commented:
does anyone have any ideas?
0
 
Neil_BradleyWeb UX/UI DeveloperCommented:
You need to change your actual image width from 752px to 100% (height auto or 100%) then it will stretch to fit its container.. By giving it an actual px size it will never respond to its containing environment.
You may need to play around with the css for the hero as the image height will then be greater that your left hand menu and look a bit odd.

Cheers,
N
0
 
nsitedesignsAuthor Commented:
Would I change BOTH width and height to 100%?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Neil_BradleyWeb UX/UI DeveloperCommented:
You could although height auto will work as long as the width is set to 100%.
N
0
 
nsitedesignsAuthor Commented:
The nav works good for the slider animation.  If I change the css for the nav, then that won't look right.  It's like a catch-22.  fix one thing and the other goes bad.
0
 
Scott Fell, EE MVEDeveloperCommented:
I could have sworn I had this all working already...  
The side nav is not really normal set up.  To do what you want, we need to hide one version of the hero for larger screens and then switch out.  http://jsbin.com/koniximi/1/

Now it is a matter of getting the white background back when xs.

   <div id="xanimation_container" class="hidden-xs col-xs-12 col-sm-9 ihero">
        <img src="http://nsitedesigns.com/nsitedesigns/wiplastic_scott/img/pl4_2.jpg" class="img-responsive" /> 
      </div>
        <div class="visible-xs ihero">
        <img src="http://nsitedesigns.com/nsitedesigns/wiplastic_scott/img/pl4_2.jpg" class="img-responsive" /> 
      </div>
      
      <!-- end hero -->

Open in new window

0
 
nsitedesignsAuthor Commented:
Hi Scott,

I was working on getting the slider to work and that messed up the other code you provided.
0
 
Scott Fell, EE MVEDeveloperCommented:
What is happening is the .col- is adding left and right padding.  The solution I provided is an easy work around.  You could also use a media query and set the class ihero to padding:0px!important when below the xs threshold.  The way I have provide work within bootstrap.  Either way is good.
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now