title: How to make image responsive with Bootstrap?
body: <p>I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.</p>
  
  <p>So the current html I have is as follows (<a href="http://www.bootply.com/Iw4j36Z2K1" rel="nofollow">running code here on bootply</a>):</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-8"&gt;
              &lt;article class="row property-ad"&gt;
                  &lt;div class="col-sm-4"&gt;
                      &lt;img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;div class="property-ad-title"&gt;Nice building&lt;/div&gt;
                      &lt;div class="property-ad-description"&gt;and some describing text here&lt;/div&gt; 
                  &lt;/div&gt;
              &lt;/article&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4"&gt;
              &lt;div class="right-side-ad"&gt;
                  some advertisement is going here
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the title and description are only displayed correctly on a large (<code>lg</code>) screen. On an <code>md</code> or <code>sm</code> screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a <code>max-width: inherit;</code>, but that doesn't seem to do anything.</p>
  
  <p>Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.</p>
  
  <p>So my main questions;</p>
  
  <ol>
  <li>What is the typical desired behaviour to make a website responsive when working with images that are next to text?</li>
  <li>How would I implement that?</li>
  </ol>
  
  <p>All tips are welcome!</p>