Menu icon Foundation
Full Screen Width Images in Orbit

Probably a simple question but I have to ask. Everyone seems to be asking about full screen backgrounds, but I am only wanting full width image and preferably not as background images.

I've installed orbit and used the .row .row to accomplish a true full width left and right. Eventually I'll be implementing something like Adaptive Images or the phpThumbsUp from MODx to deliver images. In the meantime though what would I write to get an image to enlarge to fill the orbit slides so that they fill the full width of the screen?

Would I write a css rule and add it to the ul? Please review my code below and let me know if this is the correct solution.

Any feedback graciously appreciated.

.my_orbit img {
  min-width: 100%;
  height: auto; }
            

         

Foundation 5Orbitimagesfull width

Probably a simple question but I have to ask. Everyone seems to be asking about full screen backgrounds, but I am only wanting full width image and preferably not as background images.

I've installed orbit and used the .row .row to accomplish a true full width left and right. Eventually I'll be implementing something like Adaptive Images or the phpThumbsUp from MODx to deliver images. In the meantime though what would I write to get an image to enlarge to fill the orbit slides so that they fill the full width of the screen?

Would I write a css rule and add it to the ul? Please review my code below and let me know if this is the correct solution.

Any feedback graciously appreciated.

.my_orbit img {
  min-width: 100%;
  height: auto; }
            

         

This post has been closed. No new replies can be added.

Rafi Benkual over 5 years ago

You can do this with css. Here is the html

<ul class="example-orbit" data-orbit>
  <li>
    <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
    <div class="orbit-caption">
      Caption One.
    </div>
  </li>
  <li>
    <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" />
    <div class="orbit-caption">
      Caption Two.
    </div>
  </li>
  <li>
    <img src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" />
    <div class="orbit-caption">
      Caption Three.
    </div>
  </li>
</ul>

And the css:

.example-orbit img {
  width: 100%;
  height: auto;
}

Marc McGee over 5 years ago

Thanks Rafi.

min-width: 100%; seems to be working. But maybe width: 100%; is more correct?