ruk·si

🎨 CSS
Cropping Images

Updated at 2013-03-07 17:49

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>