Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    880
    Thanks
    136
    Thanked 24 Times in 24 Posts

    How to make images responsive and show in a mobile smaller

    I am wondering that if I change the pixels to ems would my images work in a mobile ie smaller size.

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    10,873
    Thanks
    6
    Thanked 1,299 Times in 1,269 Posts
    No. Ems are relative to the font size applied to the element (or an ancestor), so it won’t change anything. The typical and simplest approach is to do this:

    Code:
    img {
      max-width: 100%;
      height: auto;
    }
    But images for mobile devices aren’t just about the dimensions, you also have to take file size and limited bandwidth into account, and this is where it gets a little more intricate. There are several good sources to learn from:


  3. Users who have thanked VIPStephan for this post:

    quartzy (08-21-2017)

  4. #3
    Regular Coder
    Join Date
    May 2009
    Posts
    880
    Thanks
    136
    Thanked 24 Times in 24 Posts
    No, my images just will not fit, even the navigation is too big for mobiles. I think I will have to make border-images on 2 sides only. Thanks for the resources


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •