I'm new to the ionic. I have developed an application in ionic with some static content. In the browser the content is responsive where as when i build apk file and install in phone the image sizes and icons are very large. Can anybody tell me what is the possible solution to auto align the image size in mobile?
Thanks in advance.
Sorry for late reply...
Images are another important facet of practically every website. Mobile users may not be looking to stream videos, but photos are a whole different story. These are also the biggest culprits when it comes to layouts breaking out of the box model.
img { max-width: 100%; }
The standard rule for CSS is to apply a max-width property to all images. Since they’ll always be set at 100% you will never notice distortions. When the user re-sizes their browser window smaller than your image can handle it’ll automatically re-adjust to 100% width scaled down. The problem is that Internet Explorer cannot understand this property, so you’ll need to put together an IE-specific stylesheet using width: 100%;.
Flexible images are also possible if you use JavaScript or jQuery plugins. There are some really smart developers out there who have put in the time to build incredibly responsive image content. This thread is just one of many in Stack Overflow which features an outlandish yet convenient approach to solving the IE6/7 bugs.
I would personally recommend sticking to natural CSS image resizing. If your website is running in a mobile browser with JavaScript enabled it can most likely support CSS as well. If you really want to dig deeper, check out this 24 ways article Images for Adaptive Designs..
pa1 reply is good, but i would change it to remain image proportion when scaling:
img {
max-width: 100%;
height: auto;
}
