No me funciona la propiedad top en css, mi código es el siguiente:
Lo que deseo es que la imagen quede centrada verticalmente a pesar que su contenedor tenga un limite de max-height: 300px, uso esa propiedad para que las imágenes que sean más pequeñas se adapten bien al contenedor. Con el siguiente código no lo he logrado conseguir. El problema es el max-height: 300px, quisiera hallar una solución.
.article-image {
position: relative;
width: 100%;
max-height: 300px;
background: yellow;
display: block;
overflow: hidden;
}
.article-image>img {
background-color: rgba(0, 0, 0, .5);
position: relative;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
display: inline-block;
}
<div class="article-image">
<img src="https://images.unsplash.com/photo-1459259191495-52eccde892c7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=06d779f555839006f881cad05b39c1e5&auto=format&fit=crop&w=750&q=80">
</div>
<br><br>
<div class="article-image">
<img src="https://images.unsplash.com/photo-1488116438332-30c57aca5d9d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=80bff8ea1312b15873cc551e0afc2727&auto=format&fit=crop&w=334&q=80">
</div>
Con el siguiente código si funciona, pero no quiero que tenga un height fijo:
.article-image {
position: relative;
width: 100%;
height: 300px;
background: yellow;
display: block;
overflow: hidden;
}
.article-image>img {
background-color: rgba(0, 0, 0, .5);
position: relative;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
}
<div class="article-image">
<img src="https://images.unsplash.com/photo-1459259191495-52eccde892c7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=06d779f555839006f881cad05b39c1e5&auto=format&fit=crop&w=750&q=80">
</div>
<br><br>
<div class="article-image">
<img src="https://images.unsplash.com/photo-1488116438332-30c57aca5d9d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=80bff8ea1312b15873cc551e0afc2727&auto=format&fit=crop&w=334&q=80">
</div>