4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Responsive web design and resizing images

by hariprasad p
3 replies
  • WEB DESIGN
    • |
Hi,
Responsive web design works great on most HTML elements excepts images.I find it a mess. When resizing viewports, you cannot use resizing percentages on an image since it will take on the parent element width and height right. You need to set fixed widths and heights for images...Or am I missing something?

So how exactly do you do a responsive design involving images whose container element/parent will stretch above its native width and shrink below its native width?

Thank you
#design #images #resizing #responsive #web
Avatar of Unregistered
  • Profile picture of the author diacontes
    It depends on how you are displaying the image. Is it a background image that needs to cover both width and height 100%? If yes, you can center the image and use the background-size property so that you crop it for different widths while also keeping image quality.

    If it's an <img> tag, you can do something like this: width: auto; max-width: 100%; text-align: center;

    That's an example of displaying the image at it's best quality all the time, on all widths and also centering it.
    {{ DiscussionBoard.errors[11302206].message }}
  • Profile picture of the author dmrson
    What I do is wrap it in a div element and set the width of the image to 100% (or the height) and use regular CSS techniques to resize the div element. does that make sense?
    Signature
    - RSS to Twitter PHP script - automatically syndicate your website or blog to Twitter
    - SiteLauncher for Chrome - speed dial extension BBC News described as "golden"
    {{ DiscussionBoard.errors[11302436].message }}
  • Profile picture of the author homework joy
    If you use bootstrap then you can just use, img-responsive class to your image, it will make your image responsive for all device.

    in that class, image with is set to 100%.
    {{ DiscussionBoard.errors[11311625].message }}
Avatar of Unregistered

Trending Topics