Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5

Thread: Resize Images

  1. #1
    Member
    Join Date
    Apr 2013
    Posts
    30
    Member #
    35925
    how i can resize images when display website in mobile ?
    or res is <700px when images have 200px; weight
    or res is <300px when images have 1500px; weight

    etc. Thank you.

  2.  

  3. #2
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Foysal, I'm not going to talk about media queries, because that stuff is complicated. Just add this to your css:

    img { max-width: 100%; height: auto }

    That will ensure that your image is never bigger than it's container and the height:auto will make sure the image is resized proportionately. If your images have hard-coded heights and widths, you need to add !important.

  4. #3
    Member
    Join Date
    Apr 2013
    Posts
    30
    Member #
    35925
    Hi RDesignista,

    Thanks for your reply. I like ask you that

    a) Where I should use "img { max-width: 100%; height: auto }" this code? I mean "head" section or "body" section?

    b) You know that a web page could be included many pictures. Suppose my web page includes 10 pictures. Should I use "img { max-width: 100%; height: auto }" this code along with each images?

    No more, I am waiting for your kind response.

    Thank you.

  5. #4
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Foysal,

    a - You put that code in your css area. Some people put css in their <head> area (see example below) or they make a link to an external css file. Just put it in your <head> for now, to make things easy.

    Code:
    <head>
     
    <style>
    img { max-width:100%; height: auto }
     
    </style>
     
    </head>
    b - The beauty of CSS is that you can easily affect all elements, certain elements, or just one. When you make a CSS rule for 'img', it affects all images on the page. Want to only affect one element? Create a CSS class for the elements you want to affect, then add class-specific CSS:

    Code:
    ...
    <head>
    <style>
    img { max-width: 100% ; height: auto }
    .yellow-border { border: 1px solid yellow }
    </style>
    </head>
    <body>
    <img src="coffee.jpg" class="yellow-border" />
    <img src="juice.jpg" />
    ...
    Both images will fit mobile views, but coffee.jpg will have a 1 pixel, solid, yellow border around it. Try it.

  6. #5
    Member
    Join Date
    Apr 2013
    Posts
    30
    Member #
    35925
    Thank you. I am trying.


Remove Ads

Posting Permissions

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

Search tags for this page

image forum

Click on a term to search for related topics.
All times are GMT -6. The time now is 06:28 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com