1

Que esta mal en este css?

.img-responsive{
  width: 100%;
  height: 100%;
  display:block;
}

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  padding-bottom: 2px;
  padding-top: 10px;
}

HTML

<div className="hovereffect">
        <img className="img-responsive" src={imgdir + item.img} alt={item.name}/>
            <div className="overlay">
                <h2>{item.name}</h2>
                <p> 
                    <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
                </p> 
                <p> 
                    <a href="#">VIEW DEMO</a>
                </p> 
            </div>
    </div>

Necesito que la imagen sea realmente responsive y no lo es, por ejemplo como mostrare a continuacion si pongo una imagen mas chica que la azul, (la azul es la que anda bien y tiene un tamaño de 1100 x 620) se ve asi digamos queda mas grande que las.

introducir la descripción de la imagen aquí

3
  • ¿Podrías poner un ejemplo con una imagen de internet? Tu ejemplo ahora mismo no se puede reproducir. Commented el 18 ene. 2017 a las 21:40
  • 1
    Intenta agregar: img {max-width: 100%;} a tu css Commented el 18 ene. 2017 a las 21:49
  • No funciona agregando img {max-width: 100%;} Commented el 19 ene. 2017 a las 17:41

1 respuesta 1

1

¿Has probado lo siguiente?

.img-responsive{
  max-width: 100%;
  height: auto;
}

Con esto la imagen debería adaptarse en todo momento a su contenedor.

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.