16 Replies Latest reply: Aug 3, 2012 11:59 AM by ALsp RSS

    Image css

    point hvnwrd Community Member

      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

        • 1. Re: Image css
          dhosford Adobe Employee

          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?

          • 2. Re: Image css
            Jon Fritz II MVP

            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?

            • 3. Re: Image css
              Nancy O. MVP

              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.

              • 4. Re: Image css
                point hvnwrd Community Member

                I want to change the width and height to specific sizes.

                 

                I will do this, adding the width and height I want, but I am not seeing any changes.

                 

                Thank you.

                 

                Melody

                 

                <. . >   Point Heavenward Siamese

                              www.pointheavenwardsiamese.com

                  "Unto You I lift up my eyes, O You who dwell in the heavens."  Psalms 123:1 

                           

                • 5. Re: Image css
                  dhosford Adobe Employee

                  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!

                  • 6. Re: Image css
                    point hvnwrd Community Member

                    http://pointheavenwardsiamese.com/GeishagollSiamese/females.php   On this page (for example) the top picture I would like to make just a bit bigger...but the BOTTOM PICTURE...it is WAY too big.  I've tried adjusting that in my html width and height...but there was no change.

                     

                     

                    Thank you Nancy.

                     

                    <. . >   Point Heavenward Siamese

                                  www.pointheavenwardsiamese.com

                      "Unto You I lift up my eyes, O You who dwell in the heavens."  Psalms 123:1 

                               

                    • 7. Re: Image css
                      Nancy O. MVP

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

                       

                      .section img {

                          height: auto;

                          width: auto;

                          max-width: 100%;

                      }

                       

                       

                      Nancy O.

                      • 8. Re: Image css
                        point hvnwrd Community Member

                        Thank you Nancy.  That got it.

                         

                        Thank you!

                         

                        Melody

                         

                        <. . >   Point Heavenward Siamese

                                      www.pointheavenwardsiamese.com

                          "Unto You I lift up my eyes, O You who dwell in the heavens."  Psalms 123:1 

                                   

                        • 9. Re: Image css
                          ALsp Community Member

                          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

                          • 10. Re: Image css
                            Nancy O. MVP

                            @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.

                            • 11. Re: Image css
                              Jon Fritz II MVP

                              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.

                              • 12. Re: Image css
                                ALsp Community Member

                                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

                                • 13. Re: Image css
                                  ALsp Community Member

                                  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

                                  • 14. Re: Image css
                                    Nancy O. MVP

                                    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.

                                    • 15. Re: Image css
                                      Jon Fritz II MVP

                                      This free service may be of assistance then Ahl

                                       

                                      http://www.picresize.com/

                                      • 16. Re: Image css
                                        ALsp Community Member

                                        That's the spirit