|
Image Vertical Crop
An image that stays it's original size and is simply cropped from the bottom as the height of the screen gets shorter.
<style>
/* Image Vertical Crop Pattern CSS */
@media only screen and (max-width: 599px) {
div[class="pattern"] {
position: relative;
overflow: hidden;
width: 100%;
-webkit-transition: height .5s ease-out;
-moz-transition: height .5s ease-out;
-ms-transition: height .5s ease-out;
-o-transition: height .5s ease-out;
transition: height .5s ease-out;
}
div[class="pattern"] img {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -225px;
}
}
@media only screen and (max-width: 599px) and (max-height: 700px) {
div[class="pattern"] { height: 560px !important; }
div[class="pattern"] img { bottom: -26px; }
}
@media only screen and (max-width: 599px) and (max-height: 600px) {
div[class="pattern"] { height: 460px !important; }
div[class="pattern"] img { bottom: -26px; }
}
@media only screen and (max-width: 599px) and (max-height: 500px) {
div[class="pattern"] { height: 360px !important; }
div[class="pattern"] img { bottom: -40px; }
}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="600" align="center">
<div class="pattern" style="height: 660px;">
<img src="espana_alleyway.jpg" alt="Espana" width="450" height="660" style="display: block; border: 0;" />
</div>
</td>
</tr>
</table>