Resizing but keep aspect ratio



img.some_class {
	display: block;
	max-width: 604px;
	max-height: 270px;
	width: auto;
	height: auto;
}

This also works well:


.some_class img {
	display: block;
	max-width: 100%;
	max-height: 162px;
	height: auto;
}

Background Image To Fill DIV

Useful for double size images for retina displays, responsive div boxes etc


.top_header_logo {
	background-image: url(http://some_domains.com/header_general_logo.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;    /*Make image fill the div*/
	height: 180px;
	width: 210px;	
}

 

Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *