Title: Responsive image resizing
Last modified: August 21, 2016

---

# Responsive image resizing

 *  Resolved [cbiweb](https://wordpress.org/support/users/cbiweb/)
 * (@cbiweb)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/)
 * 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?

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/#post-4753030)
 * 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%;
       ```
   
 * ??
 *  Thread Starter [cbiweb](https://wordpress.org/support/users/cbiweb/)
 * (@cbiweb)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/#post-4753039)
 * Let me put it another way…
 * How can I achieve the effect of `style="max-width:100%; height:auto;` without
   it being inline?
 *  Thread Starter [cbiweb](https://wordpress.org/support/users/cbiweb/)
 * (@cbiweb)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/#post-4753154)
 * 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.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/#post-4753163)
 * You need to target the `<img>` element if you’re using `max-width`
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/#post-4753164)
 * E.g.:
 *     ```
       <div id="foo">
        <img src="images/myimage.png" alt="" />
       </div>
       ```
   
 *     ```
       #foo img {
        max-width: 100%;
       }
       ```
   
 *  Thread Starter [cbiweb](https://wordpress.org/support/users/cbiweb/)
 * (@cbiweb)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/#post-4753167)
 * *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>
       ```
   
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/#post-4753169)
 * It’s not clear what your issue is, why can’t you use “max-width” in your stylesheet
   while using the “`<img>`” element?
 *  Thread Starter [cbiweb](https://wordpress.org/support/users/cbiweb/)
 * (@cbiweb)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/#post-4753171)
 * 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](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.
 *  Thread Starter [cbiweb](https://wordpress.org/support/users/cbiweb/)
 * (@cbiweb)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/#post-4753238)
 * 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>
       ```
   

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Responsive image resizing’ is closed to new replies.

## Tags

 * [image resize](https://wordpress.org/support/topic-tag/image-resize/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 9 replies
 * 2 participants
 * Last reply from: [cbiweb](https://wordpress.org/support/users/cbiweb/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/responsive-image-resizing/#post-4753238)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics