Skip navigation
point hvnwrd
Currently Being Moderated

Image css

Aug 3, 2012 9:49 AM

What do I need to change/add to, to this css, to be able to adjust my image size?

 

.section img {

    height: auto;

    width: auto;

    max-width: 100%;

}

 

I have tried to make some of my pictures larger/smaller and have been unable to.  I'm assuming it has to do with my css.

 

Thank you for your help.

 

Melody

 
Replies
  • Currently Being Moderated
    Aug 3, 2012 9:53 AM   in reply to point hvnwrd

    Hi there,

     

    I'm having trouble understanding exactly what you need. Do you want to just change the width and height to specific sizes or do you want the image to scale with the browser size?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 9:56 AM   in reply to point hvnwrd

    If you want to do it on mouse over, you could add this...

     

    .section img:hover {

    height:100px;

    width:100px;

    }

     

    That would change the image sizes contained in an object with the .section class go to 100 pixels wide and tall.

     

    What exactly are you looking to do?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 9:56 AM   in reply to point hvnwrd

    Not sure I understand your question. 

    What do I need to change/add to, to this css, to be able to adjust my image size?

     

    Image size is typically described in your HTML code.

     

    <img src="some_image.jpg" width="xxx"  height="xxx">

     

    If you want to make images that re-scale with the page layout, you must put them inside a liquid (% based) container and drop the width & height attributes from your HTML code.

     

    For better help, we will need to see a link to your test page.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 9:59 AM   in reply to point hvnwrd

    As Nancy O. mentioned, please post a link to your test page so that we can troubleshoot this further for you. There's no way to know what the problem is at this point without a test link. Thank you in advance!

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 10:11 AM   in reply to point hvnwrd

    Remove this from your CSS.  You don't need it.

     

    .section img {

        height: auto;

        width: auto;

        max-width: 100%;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 10:34 AM   in reply to Nancy O.

    Actually, I put that there and it is needed - along with a lesson on how

    to make images for web pages. Without that rule, if Melody adds images

    to her site that are larger than her layout, the layout will break and

    she will wind up with either float drop or images that extend past the

    boundaries of her container.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    Dreamweaver Menus | Galleries | Widgets

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 10:46 AM   in reply to Al Sparber

    @Al,

    OK, I see what you mean now.

     

    @Melody,

    I urge you to resize and optimize ALL your images in Photoshop or Fireworks before dropping them into your web pages.  Big image/file size = slooooow page load.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 10:50 AM   in reply to Nancy O.

    I have to second Nancy's suggestion. Just one oversized image (reduced in scale by CSS/HTML) can make your page seem unloadable on a slow connection.

     

    For example: A 1MB jpeg file that is ~12" across is resized by CSS to be ~3" across in it's display size. Even though the display size has been reduced, it's still 1MB and adds over 5 minutes to the download time on a typical 56k modem connection.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 11:20 AM   in reply to Nancy O.

    I'd been helping Melody. She is a very sweet person. What I did was to

    fix her site. She somehow wound up with an HTML5 DOCTYPE without a fix

    for old IE was wondering why her site did not display styled in IE8. So

    I kept the DOCTYPE, but got rid of the unsupported tags.

     

    Next, we dealt with images. What she has is what she has. Melody has

    neither image editing experience not an image editing application. So

    she was manually changing height and width attributes on every image tag.

     

    She wanted a gallery, but her images are so drastically different in

    size and aspect ratio, that an open source solution was out of the

    question. So I gave her a copy of IGM2 and set up a test gallery for her:

    http://pointheavenwardsiamese.com/GeishagollSiamese/test.htm

     

    I set up the embedded gallery at fixed height so the images would not

    scale out of site, but gave her a full-Screen mode icon so that viewers

    could switch to full-screen mode and see all images at their full

    natural size.

     

    The biggest problem is that Melody is managing her site through her

    hosting company's control panel and is therefore unable to really use

    Dreamweaver's more powerful features. When she makes a change to her

    site, she has to copy the code from Dreamweaver and paste it into the

    control panel. This has caused numerous corruptions.

     

    So, I just wanted you to have an overview so that if you find yourself

    answering her questions, you go gently. She kind of needs a guardian

    angel at this point to walk her through things with the most important

    thing being to teach her how to connect Dreamweaver to her server.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    Dreamweaver Menus | Galleries | Widgets

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 11:23 AM   in reply to Jon Fritz II

    John Fritz,

     

    What you are saying is not relevant to the actual situation. The woman

    has no image editing capabilities. She is using the height and width

    attributes of the image tag as her only means of image editing. She

    needs someone kindhearted enough, and with enough time, to walk her

    through the fundamentals of web design and of using Dreamweaver.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 11:32 AM   in reply to Al Sparber

    Thanks for the background Al.  

    Sounds like a complex and frustrating scenario.

    I didn't mean to interfere with the set-up you so kindly provided for Melody.

     

    Cheers!

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 11:38 AM   in reply to Nancy O.

    This free service may be of assistance then Ahl

     

    http://www.picresize.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 11:59 AM   in reply to Jon Fritz II

    That's the spirit

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points