Why is this image not responsive?

Navigation
1

What's wrong with this 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>

I need the image to be really responsive and it is not, for example as I will show below if I put a smaller image than the blue one, (blue is the one that works well and has a size of 1100 x 620) so let's say it's bigger than the ones.

    
asked by Santiago D'Antuoni 18.01.2017 в 22:38
source

1 answer

1

Have you tried the following? 

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

With this the image should adapt at all times to its container.

    
answered by 23.01.2017 в 08:05
Retrieve value of an array of json array with jquery Show name of a record using the ID found in another table [closed]