Responsive Image

Responsive Image CSS

//Source: http://jeffsebring.com/responsive-wordpress-images/


.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;
    }

}