resizes image inside col-md-12 class

Question

I created a responsive site but some of the images dont resize as I want them to.
See this screenshot:

#img1 {
    width: 250px;
    height: auto;
    margin: auto;
    display: block;
    background-size: 20%;
}

<div class="row">

    <div class="col-md-6" id="mision">
        <img src="imagenes/MISION.png" id="img1">
    </div>

    <div class="col-md-6" id="vision">
        <img src="imagenes/VISION.png" id="img2">
    </div>

    <div class="col-md-12" id="servicios">
        <img src="imagenes/SERVICIOS.png" id="img3">
    </div>

</div>

Answer 1

You're using a fixed width in the CSS for your image element, try changing to a percentage width, e.g.:

#img1{
    width: 80%;
    height: auto;
    margin: auto;
    display: block;
    background-size:20%;
}

Then the width of the image should resize with your column.