Menu icon Foundation
Disabling auto image scaling to screensize

Hi All,

is there anybody knows how to prevent an image from shrinking due to small screen size? For example, if an image width is larger than 12 columns width, use original image width and enable x-axis scrolling in the div?

I have tried to set as following but cannot achieve that effect. (Using foundation5 MVC without SASS)

I am new to foundation and CSS. Your ideas and helps will be much appreciated.

Thank you.

       <div class="small-12 columns" style="overflow-x:scroll;width:auto">
            <img style="width:1900px" src="someimageuri" />
        </div>
            

         

image scaliingFoundation 5

Hi All,

is there anybody knows how to prevent an image from shrinking due to small screen size? For example, if an image width is larger than 12 columns width, use original image width and enable x-axis scrolling in the div?

I have tried to set as following but cannot achieve that effect. (Using foundation5 MVC without SASS)

I am new to foundation and CSS. Your ideas and helps will be much appreciated.

Thank you.

       <div class="small-12 columns" style="overflow-x:scroll;width:auto">
            <img style="width:1900px" src="someimageuri" />
        </div>
            

         

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Howdy!

Set a min-width and height to your image.

Wing-Hou Chan over 5 years ago

Howdy!

Set a min-width and height to your image.

Chestertonpdf over 5 years ago

You image can automatically shrink to small screen size? That is impossiable, you must invoke certian image sizing automatically adjusting plugin, so you need to find out and turn off it. Or you can scale your image by using a realiable image processing tool before you load it, and lock the size.

http://www.rasteredge.com/how-to/vb-net-imaging/scale-image/

http://www.rasteredge.com/how-to/vb-net-imaging/imaging-processing/

Karl Ward over 5 years ago

Although the results of doing such would be debatable, it should be possible to set image width on a per-image basis. Your code should work, but you may need to use !important.

<img style="width:1900px !important;" src="someimageuri" />

Rafi Benkual over 4 years ago

I found max-width: none works for this, but I only use it on small images like in a media object. http://codepen.io/rafibomb/pen/jERpXj