Results 1 to 11 of 11

Thread: Using CSS to scale images

  1. #1
    Join Date
    Jan 2006
    South Africa

    Using CSS to scale images

    Hi, everyone,

    I'm wondering if it is possible at all to use CSS to increase or reduce the size (width/height) of an image to, say, 50% of its original. (Yes, I know that client-side resizing is not the way to do it and leads to bloated page load times and grotty-looking results, but that's not the point right now.)

    For example, if I have the following HTML code:

    HTML Code:
    <img src="mugshot.gif" width="100" height="200" border="0" alt="Foobar" />
    is there any CSS trickery possible to cause this image to be displayed at, say, 50% of its original size (i.e. 50x100) regardless of its size? I could fix the size in CSS, thereby overriding the original 100x200 size declaration (with such a conflict between HTML and CSS sometimes leading to unpredictable results, which is why I avoid that sort of thing) but that's not what I want; what I am looking for is to reduce all image sizes by a certain factor.

    I have tried the intuitive approach - the first thing that the unenlightened might think of, which is of course:
    HTML Code:
    img {
      width: 50%;
      height: 50%;
    but of course that resizes the image to 50% of the PARENT size (e.g. the table, div or body in which the image lives).

    Suggestions, anyone?

    // FvW

  2. #2
    Join Date
    Nov 2010
    I don't know whether this is what you want, but I've solved it like this: put your image in div with exact width and height of your image and then you can scale img with css by setting &#37; I know, it's obvious solution, but it works!

  3. #3
    Join Date
    Dec 2005
    But of course then you'd have to know the exact width and height of every image and if you knew that then you wouldn't have to use the extra div.....

    What the OP is talking about is not directly possible with CSS alone, but easily accomplished with Javascript - e.g. find all images with a certain selector, scale those images using Javascript.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...

  4. #4
    Join Date
    Nov 2010
    Yes, you definitely can use CSS.

    The trick is to only specify ONE dimension, and then it will scale proportionally. As for getting it to a percentage... EMaks is correct, you need a value to scale from, and CSS defaults to using the container. Therefore set (at least) one dimension, and then use the CSS trick to scale that ONE dimension, and the other should scale up.... Of course, if your container has a limit on the other dimension such as height or max-height, you may run into Overflow issues...

    Dekker (Why Not Fix It?)

  5. #5
    Join Date
    Jan 2006
    South Africa
    Thanks for the responses, everyone!

    So. The long and the short of it is that there is neither an easy nor a good way to do this using CSS alone. Okay - so as ideas go this one was a dead end. If it can be made to work at all, it will require horrid levels of kludgy-ness. Oh well... At least I won't waste any more time on tinkering with it, then.

    Thanks for sorting me out, guys!

    // FvW

  6. #6
    Join Date
    Mar 2010
    In software development not only pertaining to Web applications, we need to use a multitude of technologies to deliver the goods. It is quite impossible to find one language/technology to fulfill all requirements.

    It seems for your case it will be worth your while to learn JavaScript on top of CSS and HTML.

    Later on, you will need a server side Web language too.

  7. #7
    Join Date
    Jun 2013
    Ha, I hardy use CSS to increase or reduce the size (width/height) of an image to, say, 50% of its original, because I think image scaling is one of the simplest image processing function, it can be quickly finished by using simple vb.net language.

  8. #8
    Join Date
    Jan 2014
    Boston, Massachusetts
    width: 50%;
    height: auto;

  9. #9
    Join Date
    Mar 2011
    aj_nsc's suggestion to use JavaScript isn't a kludge, and it's the only client-side solution that would do what you want. But this is a task that would be best done on the server. Not only would you tend to get better quality images as a result, but it will be much faster since you would end up with "smaller" images. If you're at all familiar with programming, you could easily modify a thumbnail script to simply scale to 50% of the original.
    Rick Trethewey
    Rainbo Design

  10. #10
    Join Date
    Mar 2014
    How we can use the css for scale images?

  11. #11
    Join Date
    Mar 2014
    Just set css like that :

    img {
    width: 100%;
    height: auto;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.11102 seconds
  • Memory Usage 2,952KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (11)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (11)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates