WordPress.org

Forums

[resolved] Responsive image resizing (10 posts)

  1. cbiweb
    Member
    Posted 1 year ago #

    I can make an image responsive with this inline code:

    <img src="images/foo.png" alt="blah" title="yada" style="max-width:100%; height:auto;" />

    No break points necessary, it auto-resizes with window size.

    I'd rather not use inline styling, though. But I can only achieve responsive images by using this in a stylesheet:

    -webkit-background-size:n%;
    -moz-background-size:n%;
    background-size:n%;
    background-position: n% n%;

    But with that, I have to create a number of break points, which really should be unnecessary.

    Is there way to achieve the inline result, but via stylesheet?

  2. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    It's not a background image though, so how would using background-size work?
    Can't you just put your inline CSS into your stylesheet?

    max-width: 100%;

    ??

  3. cbiweb
    Member
    Posted 1 year ago #

    Let me put it another way...

    How can I achieve the effect of style="max-width:100%; height:auto; without it being inline?

  4. cbiweb
    Member
    Posted 1 year ago #

    Neither of these work for me...

    CSS:

    #foo {
    max-width:100%;
    background:url(images/myimage.png) no-repeat 0 0;
    }

    HTML:
    <div id="foo"></div>

    CSS:

    #foo {
    max-width:100%;
    }

    HTML:
    <div id="foo"><img src="images/myimage.png" alt="" title="" /></div>

    And it makes no difference when I try using single or double quotes around the image path.

  5. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    You need to target the <img> element if you're using max-width

  6. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    E.g.:

    <div id="foo">
     <img src="images/myimage.png" alt="" />
    </div>
    #foo img {
     max-width: 100%;
    }
  7. cbiweb
    Member
    Posted 1 year ago #

    *bonk self on head* -- whaddya know, that works.

    So back to my original question: How do I achieve the same thing via stylesheet?

    I thought this should work, but it doesn't:

    #foo {
     max-width:100%;
     background:url(images/myimage.png) no-repeat 0 0;
    }
    <div id="foo"></div>
  8. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    It's not clear what your issue is, why can't you use "max-width" in your stylesheet while using the "<img>" element?

  9. cbiweb
    Member
    Posted 1 year ago #

    The main reason is I can't get the image to show up inline, per this topic that hasn't been resolved yet (http://wordpress.org/support/topic/inline-image-not-showing-up?replies=0).

    If I can solve that problem, I'd be fine. But as it is, I need to get this one site up and running ASAP, so I need a different solution.

  10. cbiweb
    Member
    Posted 1 year ago #

    I was able to find the answer elsewhere, but here it is for any future readers:

    #foo {
    width: 100%;
    background: url('images/myimage.png') no-repeat;
    background-size: contain;
    height: auto;
    min-height: 222px;
    }
    <div id="foo"></div>

Topic Closed

This topic has been closed to new replies.

About this Topic