Responsive WordPress Images

The whole Responsive, flexible design thing is not going away. With WordPress dominating the Open Source platform space, there will be more and more demand for responsive WordPress themes.

This is a combination of the styles included with the default WordPress TwentyEleven theme, and some modifications of my own. Include this snippet with your css to save a bunch of time building your responsive WordPress theme.

.entry-content img, .comment-content img, .widget img {
    max-width: 97.5%;
}

img[class*="align"], img[class*="wp-image-"] {
    height: auto;
}

img.size-full {
    max-width: 97.5%;
    width: auto;
}

.entry-content img.wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: 1.625em;
}

p img, .wp-caption {
    margin-top: 0.4em;
}

.wp-caption {
    margin-bottom: 1.625em;
    max-width: 96%;
    padding: 9px;
}

.wp-caption img {
    display: block;
    margin: 0 auto;
    max-width: 98%;
}

.wp-caption .wp-caption-text, .gallery-caption {
    font-size: 12px;
}

.wp-caption .wp-caption-text {
    margin-bottom: 0.6em;
    padding: 10px 0 5px 40px;
    position: relative;
}

.wp-caption .wp-caption-text:before {
    content: '2014';
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    margin-right: 5px;
    position: absolute;
    left: 10px;
    top: 7px;
}

.gallery {
    margin: 0 auto 1.625em;
}

.gallery a img {
    border: none;
}

img#wpstats {
    display: block;
    margin: 0 auto 1.625em;
}

.gallery-columns-4 .gallery-item {
    width: 23%;
    padding-right: 2%;

}

.gallery-columns-4 .gallery-item img {
    width: 100%;
    height: auto;
}

img[class="align"],img[class*="wp-image-"], .gallery .gallery-icon img {
    border: none;
    padding: 6px;
}

@media only screen and (max-width: 800px) {
    embed, object {
        max-width: 100%;
    }
}

@media only screen and ( max-width: 650px ) {

    .gallery-columns-3 .gallery-item {
        width: 31%;
        padding-right: 2%;
    }

    .gallery-columns-3 .gallery-item img {
        width: 100%;
        height: auto;
    }

}

@media only screen and (max-width: 450px) {
    .gallery-columns-2 .gallery-item {
        width: 45%;
        padding-right: 4%;
    }

    #content .gallery-columns-2 .gallery-item img {
        width: 100%;
        height: auto;
    }

}