Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Getting small images to grow larger than their original size…

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #173158
    imagecrafting
    Participant

    So PLEASE don’t tell me I shouldn’t do this, this is a very limited case and I need to do it to bring a 138×86 thumbnail up to about 250px when it’s being rendered at a 320px smart phone resolution. I have the media query set up and I have max-width set to 100%.

    Here is the page:
    testing.bistromd.com/new-media

    set your browser to 320×480 and then scroll to the bottom. You’ll see 4 thumbnails that have successfully collapsed and centered (as designed) but they have a bit too much white space on either side and I’d really like to widen them up a bit.

    I’m open to any suggestions except “You shouldn’t scale up a smaller image”…

    #173160
    Paulie_D
    Member

    You have this

    .bmdMediaVideoThumbnail {
        padding: 0.5em;
        display: inline-block; /* display:block in media query */
        max-width: 100%;
    }
    

    The inline-block collapses the div to its contents. If you toggle it off in Developer Tools the image ‘scales’ up if in the same media query you set the image within it to have a width…say 80%.

    .bmdMediaVideoThumbnail img {
           width: 80%; /* approx */
    }
    
    #173161
    imagecrafting
    Participant

    SOLVED! Thanks Paulie, both for the quick response and the correct answer…

    Great site, will hang around more often…

    The final media query looks like so:

    @media only screen and (max-width : 386px) {
    .bmdMediaVideoThumbnail {
    display: block;
    }
    .bmdMediaVideoThumbnail img {
    width: 90%;
    }
    }

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.