1

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>

1 respuesta 1

1

Si pones in height en porcentaje en un elemento por fuerza el padre tiene que tener un height especificado, si lo que te interesa es que las imágenes no sean mayor de 300px ¿Podrías especificar el max-height en la imagen?.

También si lo que te interesa es que la imagen abarque el contenedor y se vea centrada puedes usar object-fit.

.article-image {
  width: 100%;
  background: yellow;
  overflow: hidden;
}
.article-image>img {
  background-color: rgba(0, 0, 0, .5);
  width: 100%;
  max-height:300px;
  object-fit:cover;
  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>

1
  • No es exactamente lo que estaba buscando, pero es la mejor solución, muchas gracias. Commented el 7 abr. 2018 a las 19:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.