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.