CODEWITHSUNDEEP
csszurb-foundation
JQuery Mobile
JQuery Mobile

Reputation: 6301

Image Scaling in Foundation Zurb

I am building a website using Foundation Zurb 5. The website will have a page that has an h1 tag to display the page title. Underneath the title, I want to show a high resolution image. By itself, the image's resolution is 1920 x 1200. This image will be used on the large version of the page as well as the mobile version.

When the image appears on someone's computer (the large version), I want it to have a maximum height of 200px. This currently works. However, when the image is viewed on a mobile device, I want it to scale down such that it takes up the full width of the device. This latter requirement is not working. Currently, I'm trying the following:

<div class="th">
  <img src="/res/img/sample-01.jpg" style="max-height:200px; max-width:100%;">
</div>

I suspect the problem has something to do with landscape vs portrait viewing. However, I'm not sure. At the same time, I'm not sure how to accomplish what I'm trying. Does anyone know how to do this? If so, how?

Upvotes: 0

Views: 7255

Answers (2)

Adam Huffman
Adam Huffman

Reputation: 1041

I suggest looking at Interchange and modify the actual images. That way you will not load the large 1920 x 1200 image on someone's mobile device. I believe this is a more elegant solution, but I am not sure how comfortable you are with image manipulation.

Another approach would be to use the Visibility Classes. If you went this route you could have two divs or two img. One for large screens (desktops) using the show-for-large-up class and one for smaller screens (tablets/phones) using hide-for-large-up.

Upvotes: 1

Slawa Eremin
Slawa Eremin

Reputation: 5415

Maybe you should try to use background image for that:

for example:

.th{
  background-repeat: no-repeat;
  background-size: cover;  
  background-position: center center;
}

<div class="th" style="background-image: url(/res/img/sample-01.jpg)">

</div>

Upvotes: 1

Related Questions