First remove the max-width: 184px attribute max-width: 184px 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 using inline style:
<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 elements of the ancestral style may interfere, you can reset to do it like this:
#myLogo { all: initial!important; width: 100%!important; height: auto!important; }
If you are still experiencing a problem, the next step is to use JavaScript
Object.assign(document.getElementById('myLogo').style, { all: 'initial', width: '100%', height: 'auto' });
This code must be included after the element in the document, otherwise it will not be able to find the specified element, since it does not yet exist.
Now that you have added the example to your question, you can make the image look natural by replacing the following CSS:
img { display:table-cell; width:100%; height:auto; }
Using this CSS:
img { display:inline-block; }
( Demo )
I believe your use of display: table interfering with your design. Below are two ways to achieve the same layout without hacks.
CSS3 Method
All relevant modern browsers support this method, so if you do not care about backward compatibility with older 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%; width: calc(100% - 150px); }
Table method
For backward 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%; }