How to display large image in small devices?any tools, free module or workaround?

[muh_reza]

Hi,

 

I'm adding an image on my CMS block as follow:

<img src=".../dev/img/cms/trial.jpg" alt="" width="800" height="600" />

 the result is fine on my laptop, but when I open the page on mobile, the image have been shrinking. I thought maybe it was because of responsive feature. However, it becomes a problem as now the image has become too small to see.

 

I'm using ps 1.6

 

Thanks for checking on my topic. I really appreciate for any kind of inputs and help.

 

Regards,

reza

 

 

[shacker]

You need to use relative sizes, like width="80%", and dont use height, that rescale the image. Or use a class to the image, and use @media to set the size for diffrent screen sizes

 

<img src=".../dev/img/cms/trial.jpg" alt="" width="80%" />

[muh_reza]

hi shacker,

 

sorry for my late respond..and thanks for your help.

I have tried your idea. however, I might not clear enough about the issue. 

the problem is when my customer open the page on mobile, the image become too small and they cannot see it clearly.

after searching some stuffs, I might found another solution which is to use fancybox. I'm still trying it..hopefully it will be working and great.

 

Thanks again! 

[shacker]

well, you need to add a class

 

<img src=".../dev/img/cms/trial.jpg" alt="" class="respo" />

 

and use in the global.css in the media queries the size

 

 @media (min-width: 768px) {

.respo{width:100%}

}

 

 @media (max-width: 768px) {

.respo{width:200px}

}

 

uses only as example

[muh_reza]

again..thanks for the help. it does work..but unfortunately, the image is still not readable. and I've tried to use as below:

 

 @media (min-width: 768px) {

.respo{width:200%}

}

 

but somehow bootstrap force it to fit the screen ("width = 100%").

I hope if using fancybox the popup size can be set wider than the screen resolution. 

[shacker]

site url of the image?