you can use display flex:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.div {
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
<!-- language: lang-html -->
Portrait Div
<div class="portrait div">
<img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Landscape Div
<div class="landscape div">
<img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Square Div
<div class="square div">
<img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
<!-- end snippet -->
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
Also, `height: auto;` if you want to specify a width only.
Example: http://jsfiddle.net/xwrvxser/1/
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
<!-- language: lang-html -->
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
<!-- end snippet -->
