Ejemplo sencillo, sin nada. Las imagenes se recortan por el owerflow...
//Código basico necesario para el funcionamiento
ul {
width: 100%;
padding: 0px;
margin: 0px;
list-style: none;
}
li {
margin: 0px;
padding: 0px;
float: left;
border: 10px solid #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
li a {
margin: 0px;
padding: 0px;
display: block;
width: 100%;
}
img {
display: block; //Esto es necesario para que la imagen cubra todo
}
4 Imagenes con el ratio 16x9 aplicado
/**
*
* Ratio 16x9
* El 56.25% lo obtenemos dividiendo 9 entre 16
* Es curioso que la altura es 0 sin embargo el padding es 56.25%... ahí esta el truco del almendruco
*/
#ratio16x9 li a {
position: relative;
height: 0px;
padding-top: 56.25%;
}
#ratio16x9 img {
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
3 Imagenes con el ratio de 4x3 centradas
/**
*
* Ratio 4x3
* El 75% lo obtenemos dividiendo 3 entre 4
* En el ratio de 16x9 tienes mas explicaciones del código
*/
#ratio4x3 li {
background-color: #000;
}
#ratio4x3 li a {
position: relative;
height: 0px;
padding-top: 75%;
}
#ratio4x3 img {
max-width: 100%;
max-height: 100%;
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
5 Imagenes con el ratio de 5x7 con efecto nauseabundo
Asi mismo hay un captcha encima...
/**
*
* Ratio 5x7
* El 140% lo obtenemos dividiendo 7 entre 5
* En el ratio de 5x7tienes mas explicaciones del código
*/
#ratio5x7 li {
background-color: #000;
}
#ratio5x7 li a {
position: relative;
height: 0px;
padding-top: 140%;
}
#ratio5x7 a:hover img, #ratio5x7 a:focus img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
#ratio5x7 img {
max-width: 100%;
max-height: 100%;
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}
Imagen centrada y recortada por los laterales...
Imagen centrada verticalmente dentro de un DIV y que se recorte por los lados con el CSS. Desgraciadamente no he conseguido hacer lo mismo que se centre horizontal y verticalmente
#cartel li a {
position: relative;
height: 0px;
padding-top: 140%;
}
#cartel img {
width: 100%;
position: absolute;
margin: auto;
top: 0px;
left: -50%;
right: -50%;
}
