bootstrap-3 - img-responsive not working

Question

I have built a small site for fun, getting familiar with bootstrap.

The issue I have is that the logo image is not responsive, no matter what I try.

The code seems quite straightforward I am sure I am just missing a minor detail:

<div id="masthead">
  <div class="container">
    <div class="row">
      <div class="col-md-7 header-logo">
        <div class="header-logo" style="color: white;">
          <img src="/img/gros_buck_175.png"  class="img-responsive"  align="left" style="padding-right: 1.5em;padding-top: 0px; max-width: 184px;">
          <br>
          TEL: 450 955-3422 <br>
          182 CHEMIN D'ADAMSVILLE <br>
          J2L 2Y6, BROMONT<br>
          laboucheriedugrosbuck@gmail.com
          <br clear="all">
          </div>
      </div>
      <div class="col-md-5">
        <div class="well well-lg">
          <div class="row">
            <div class="col-sm-12">
              <img src="/img/sceau_140.png" class="img-responsive" align="left" style="padding-right: 1.2em;">
              <h3 style="margin-top:0px; margin-bottom: 1em;">PROMO</h3>
              FAITES VOTRE PLAN DE VIANDE:<br>
              ACHETEZ POUR PLUS DE 100$ DE PRODUITS
              À L'UNITÉ ET RECEVEZ 10% EN SAUCISSES.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><!--/container-->
</div><!--/masthead-->

( Here is a fiddle reproducing the issue ) - https://jsfiddle.net/JoshC/2XgDW/2/

Answer 1

First remove the max-width: 184px attribute from the image tag

<img src="/img/gros_buck_175.png"
     class="img-responsive"
     align="left"
     style="padding-right: 1.5em;padding-top: 0px;">

Although it would be better to avoid the use of inline styling:

<img src="/img/gros_buck_175.png" class="img-responsive" id="myLogo" align="left">

#myLogo {
    padding-right: 1.5em;
    padding-top: 0px;
}

---

If there is a possibility that one of the ancestor elements' styling may be interfering, you can reset it like so:

#myLogo {
    all: initial!important;
    width: 100%!important;
    height: auto!important;
}

---

If you're still facing the issue, the next step would be to use JavaScript

Object.assign(document.getElementById('myLogo').style, {
    all: 'initial',
    width: '100%',
    height: 'auto'
});

This code should be included after the element in the document otherwise it will not be able to find the specified element as it won't exist yet.

---

Now that you've added the example to your question, you can make the image assume its natural size by replacing the following CSS:

img {
    display:table-cell;
    width:100%;
    height:auto;
}

With this CSS:

img {
    display:inline-block;
}

(Demo)

---

I believe that your use of display: table is interfering with your design. Below are two methods of achieving the same layout without hacks.

CSS3 Method

All relevant modern browsers support this method so if you dont care about backwards compatibility with old browsers, you can use this method.

(Demo)

<div class="inline-wrap">
    <img src="http://placehold.it/150x150" />
    <div class="text-wrap">Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</div>
</div>

*,*:before,*:after {
    box-sizing: border-box;
}
.inline-wrap {
    white-space: nowrap;
    font-size: 0;
    height: 150px;
}
.inline-wrap img {
    width: 150px;
}
.inline-wrap .text-wrap {
    white-space: initial;
    font-size: initial;
    display: inline-block;
    height: 100%;
    width: 65%; /* Fallback */
    width: calc(100% - 150px);
}

Table Method

For backwards compatibility you can use this method.

(Demo)

<table>
    <tr>
        <td class="img-wrap">
            <img src="http://placehold.it/150x150" />
        </td>
        <td class="text-wrap">Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</td>
    </tr>
</table>

*, *:before, *:after {
    box-sizing: border-box;
}
table, tr, td {
    border: 0;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}
table {
    width:100%;
}
table .img-wrap {
    font-size: 0;
}
table .text-wrap {
    width: 100%;
    height: 100%;
}

Answer 2

Try changing max-width to width: 100% that should tell it to take up 100% of the containers width, but as the containers width changes, so will the images size, while always maintaining 100% width coverage.
This SHOULD work, if it doesn't let me know and I'll hack it out a bit. I'm just on my phone so I don't really want to sandbox it anywhere with a touchscreen keyboard. If this doesn't work, I'll hack it out on my PC tomorrow afternoon :D!

Ps. Is there a reason you declare class .header-logo in one div and then again in the next div give it the same class. I understand if it was a different div block, but this is essentially a header logo inside a header logo