jquery-focuspoint
Version:
jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.
50 lines (49 loc) • 937 B
CSS
/* !CONTAINERS */
/*-----------------------------------------*/
html,body{
height: 100%;
width: 100%;
max-height: none;
max-width: none;
overflow: hidden;/*Prevent scrollbars in IE8*/
margin: 0;
}
body {
position: fixed;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
height: auto;
width: auto;
}
#Frame1, #Frame2, #Frame3, #Frame4, #Frame5, #Frame6, #Frame7, #Frame8, #Frame9 {
position: absolute;
overflow: hidden;
border: 5px solid #fff;
margin: -5px 0 0 -5px;
}
#Frame1, #Frame4, #Frame7 {
width: 66.6666667%;
left: 0;
}
#Frame2, #Frame5, #Frame8 {
width: 22.2222222%;
left: 66.6666667%;
}
#Frame3, #Frame6, #Frame9 {
width: 11.1111111%;
left: 88.8888889%;
}
#Frame1, #Frame2, #Frame3 {
height: 66.6666667%;
top: 0;
}
#Frame4, #Frame5, #Frame6 {
height: 22.2222222%;
top: 66.6666667%;
}
#Frame7, #Frame8, #Frame9 {
height: 11.1111111%;
top: 88.8888889%;
}