CSS -

Cropping Images

Cropping to container.

.crop {
    height: 300px;
    width: 400px;
    overflow: hidden;
}

<div class="crop">
    <img src="*">
</div>

Cropping portrait.

.crop {
    height: 300px;
    width: 400px;
    overflow: hidden;
}
.crop img {
    height: 300px;
    width: auto;
}

<div class="crop">
    <img src="*">
</div>

Cropping landscape.

.crop {
    height: 300px;
    width: 400px;
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 400px;
}

<div class="crop">
    <img src="*">
</div>