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.
img {max-width: 100%;}
a tu css