Equal height and width

You are viewing an old version of this snippet. View the current version.

Revised by Shannon Briggs 2017-01-18 e2c0696

css

      .responsive_child{
    width: 100%;
    .thumb {
        background-size: cover;
        display: block;
        height: 100%;
    }
}

    

html

Raw

      <div class="responsive_child">
    <div class="thumb"></div>
</div>

    

javascript

Raw

	<script>
		(function($){
			$(document).ready(function(){

				var cw = $('.responsive_child').width();
				$('.responsive_child').css({
					'height': cw + 'px'
				});

			});
		})(jQuery);
	</script>

HTTPS

SSH

You can clone a snippet to your computer for local editing. Learn more.

Snippets

Shannon Briggs Equal height and width