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

How do I get a responsive image to work with AFFIX in Bootstrap 3?

I have a responsive image that I'm trying to AFFIX when the user scrolls.  The image does AFFIX, but it loses it's responsiveness when data-spy="affix" is called.  Any idea how to fix this problem?  Here is the link:
http://therevolutionet.com/ION/BS3/affixMap.html
0
TrevorTomato
Asked:
TrevorTomato
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
Add a custom css using a media query to match bootstrap. Here I added a class called mapimg
@media (min-width: 768px) { 
.img-responsive.mapimg{
  max-width:400px;
  
 }

}

Open in new window

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
     <img class="img-responsive mapimg" src="http://therevolutionet.com/ION/BS3/img/map_demo.jpg">
    </div>

Open in new window


I have a sample here http://jsbin.com/eZAKiDA/3/

You can see you should really change the max width for each of

970px and 1170px
@media (min-width: 970px) { 
.img-responsive.mapimg{
  /* play with width max-width:400px; */
  
 }

}
@media (min-width: 1170px) { 
.img-responsive.mapimg{
   /* play with width max-width:400px; */
  
 }

}

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
This seems to work http://jsbin.com/eZAKiDA/3/


@media (min-width: 768px) { 
.img-responsive.mapimg{
  max-width:400px;
  
 }

}
@media (min-width: 970px) { 
.img-responsive.mapimg{
  max-width:350px;
  
 }

}
@media (min-width: 1170px) { 
.img-responsive.mapimg{
  max-width:450px;
  
 }

}

Open in new window

0
 
TrevorTomatoAuthor Commented:
max-width fixed it!  Thanks Padas!
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

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