Solved

Bootstrap - stretch hero images

Posted on 2014-02-27
8
410 Views
Last Modified: 2014-03-05
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
Comment
Question by:nsitedesigns
  • 4
  • 2
  • 2
8 Comments
 

Author Comment

by:nsitedesigns
ID: 39893205
does anyone have any ideas?
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39893434
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
 

Author Comment

by:nsitedesigns
ID: 39893447
Would I change BOTH width and height to 100%?
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39893453
You could although height auto will work as long as the width is set to 100%.
N
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:nsitedesigns
ID: 39893490
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39893775
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
 

Author Comment

by:nsitedesigns
ID: 39894831
Hi Scott,

I was working on getting the slider to work and that messed up the other code you provided.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39894863
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Gradient CSS 4 30
get multiple images to align right 5 44
Add animation to your css 12 32
jquery to restrict certain words from input in form 11 17
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now