html - middle - Centro vertical receptivo con desbordamiento oculto
vertical align middle css (5)
Después de buscar Stack Overflow y Google, todavía me pregunto cómo centrar verticalmente una imagen que es más grande que su elemento principal. No uso altura, solo altura máxima, porque quiero hacer una solución receptiva, sin jQuery. Si es posible.
Aquí hay un código:
<div style="max-height: 425px; overflow: hidden;">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
Encontré una manera de hacerlo funcionar con solo un conjunto max-height (a diferencia de una altura fija) en el contenedor.
La mala noticia es que requiere un elemento contenedor adicional.
HTML:
<div class="img-wrapper">
<div class="img-container">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
</div>
CSS:
.img-wrapper {
overflow: hidden;
max-height: 425px;
}
.img-container {
max-height: inherit;
transform: translateY(50%);
}
.img-wrapper img {
display: block;
transform: translateY(-50%);
}
Si no necesita usar etiquetas img ( violín ):
CSS
.imageContainer {
margin: 0;
height: 200px; /* change it to your value*/
width: 200px; /* or use fixed width*/
background: transparent url('''') no-repeat center;
overflow: hidden;
}
HTML
<div class="imageContainer" style="background-image: url(''http://deepwish.com/site/wp-content/uploads/2013/10/butterfly2_large.jpg'');"></div>
Tratar
<html>
<head>
</head>
<body >
<div style="max-height: 425px;border:1px solid;max-width:500px;overflow:hidden">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" style=''position: relative;top: -231px;left: -500px;''>
</div>
</body>
</html>
para centrar verticalmente una imagen más grande puede usar la construcción y css abajo
<div class="img-wrapper">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
Y css:
.img-wrapper{
position: relative;
overflow:hidden;
height:425px;
}
.img-wrapper img{
position: absolute;
top:-100%; left:0; right: 0; bottom:-100%;
margin: auto;
}
si quieres hacer una imagen receptiva, prueba usando
<div style="">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" width="100%" height="100%">
</div>