1

mi problema es el siguiente. Tengo un contenedor que tiene una imagen que ocupa todo el alto. Como la foto es rectangular queda recortada. Quiero que la foto ocupe todo el ancho, lo logre sin problemas usando width:100%. El problema que tengo es que quiero que el alto del contenedor se adapte al tamaño de la foto, es decir que si cambio la foto a una cuadrada, se adapte el alto. El contenedor tiene un height:563px. Intente ponerle height:100% pero al hacerlo me desaparece el contenedor y todo su contenido. Si pongo un alto fijo en pixeles funciona bien pero no se adapta si cambia la foto (es un blog y la foto es siempre la de la ultima entrada) Como puedo lograr un contenedor adaptable? gracias por la ayuda.

El codigo es algo similar a esto:

<div class="1">
    <div class="2">
        <div class="3"><img>aca hay una imagen</div>
        <div class="4">aca hay un texto que va sobre la imagen</div>
    </div>
</div>

.1 {width:100%;}
.2 { min-height:563px}
.3 { width: 100%; height: 100%; float:left; position:relative;}
img {min-width: 1000px;}
.4 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
1
  • prueba con utilizar width: 100vh; height: 100vh. Ya dirás si te fue bién. Commented el 24 may. 2023 a las 12:44

1 respuesta 1

1

Cynthia. Puedes cambiar el valor de height: 100%; por height: auto; el cual le dice al navegador que calcule el alto apropiado, y si el contenedor de la imagen tiene un ancho específico cambiará solo el alto. Puedes ver el resultado abajo, dale clic al botón Ejecutar.

Si lo necesitas puedes cambiar el alto de la imagen cambiando el último número del valor del atributo src dentro de la etiqueta img en el código.

También puedes ver un ejemplo aquí: https://codepen.io/moitorrijos/pen/BaqmZMr

body {
  margin: 0;
}
.a {
    width:100%;
}
.b {
    max-width: 700px;
    min-height: 563px;
}
.c {
    width: 100%; 
    height: auto;
    float:left;
    position:relative;
}
img {
    width: 100%;
}
.d {
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    position: absolute;
    color: white;
    text-shadow: 0 0 8px black;
}
<div class="a">
    <div class="b">
        <div class="c">
            <img src="https://picsum.photos/800/900">       
        </div>
    <div class="d">Texto de la imagen</div>
  </div>
</div>

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.