Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Image shown larger than css file info

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default Image shown larger than css file info

    Morning,
    I am trying to center an image & specify its size but the image is always shown at a larger size rather than the size in the css.
    Please can you check & advise.

    Thanks

    https://www.theremotedoctor.co.uk/gallery.html

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,286
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there theremotedr,

    this code...

    Code:
    img {
        display: block;
        width: 100%;
        height: auto;
    }
    ...needs to be overriden with this additional css property...

    Code:
    .header-container img {
          max-width: 260px; /* adjust this value to suit */
          margin: auto;  /* adjust this value to suit */
          border: 1px solid #000; /* remove or adjust this value to suit */
          border-radius: 10px; /* remove or adjust this value to suit */
          box-shadow:  6px 6px 6px rgba( 0, 0, 0, 0.4 ); /* remove or adjust this value to suit, -  rgba() gives transparancy to the shadow */
    }

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    Ive managed to do what i was capable of on my own.
    Please can you check my page as i would like assistance with a couple of things.

    1, "PHOTO ISNT SHOWN THE SAME SIZE"
    Ive used an image as a test "of which i will change for the correct one" you will see that even though its the same 300 x 168px file its actually shown smaller.
    Im needing it to be the same as the one shown,please see red arrows.

    2, "PARTIAL SCROLL OF PAGE"
    Is it to much trouble to somehow do the following.
    Looking at the green arrows put a freeze / fixed line there,
    I mean when the user scrolls down the page the image & buttons ABOVE the freeze / fixed line will stay put & all the photos BELOW the freeze / fixed line will scroll UP & BEHIND the image & buttons.



    Click image for larger version. 

Name:	3889.jpg 
Views:	15 
Size:	72.4 KB 
ID:	6511

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,286
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there theremoted,

    ...you will see that even though its the same 300 x 168px file its actually shown smaller.

    You are mistaken it is the gallery image that is larger.The header image is a static 300 x 168px.
    If you decrease the page width you will find the gallery image size also decreases.

    As for your second problem, that will need some thought.

    coothead
    ~ the original bald headed old fart ~

  5. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    I believe i have fixed Issue 1

  6. #6
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    I have read post number 4 & made the image 320 x 179 to fix the issue

  7. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    Coothead,
    Take a look hear to get the idea of my goal.

    https://blog.hubspot.com/website/sticky-menu-wordpress

    https://www.w3schools.com/howto/howt...cky_header.asp

    It shows the header fixed & the content below to scroll.

    Hope this helps
    Last edited by theremotedr; 06-03-2022 at 11:01 AM.

  8. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,286
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there theremotedr,

    Have a look at my copy of your page...

    updated gallery.html

    Scroll down the page and then comment.

    coothead
    Last edited by coothead; 06-04-2022 at 11:24 AM.
    ~ the original bald headed old fart ~

  9. #9
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,253
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    For me the whole page scrolls,nothing is fixed

  10. #10
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,286
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there theremotedr,

    For me the whole page scrolls,nothing is fixed

    You probably need to clear cache - ( Ctrl +F5 key ).

    It can sometimes takes a few repitions, though.

    coothead
    ~ the original bald headed old fart ~

Similar Threads

  1. PHP File Info
    By mohamedismail in forum PHP
    Replies: 2
    Last Post: 10-07-2013, 04:40 PM
  2. Replies: 1
    Last Post: 06-22-2011, 08:27 AM
  3. Resolved Loading larger image on page load, image thumbnail viewer 2
    By Lucy92 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-24-2010, 10:38 PM
  4. Image Viewer II: larger image wrong position
    By steelo in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-13-2009, 09:50 AM
  5. Ideas on pre-loading a larger swf file
    By Mark__G in forum Flash
    Replies: 11
    Last Post: 12-31-2007, 06:14 PM

Bookmarks

Posting Permissions

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