title: an image that breaks through its div container, over the menu
body: <p>I am trying to generate a page that displays an image based on the screen's proportions</p>
  
  <p>I am using bootstrap, and specific css to define the images as: responsive and rotating, based on the aspect ratio</p>
  
  <p>When the image is rotated vertically, its not "being contained" in its div container, and is displayed over the menu</p>
  
  <p>I would like to keep the same image behavior, that is to keep it responsive and in the container, regardless of the fact that it is rotating based on the aspect ratio</p>
  
  <p>Below is the relevant sample code (I didn't bother adding the full menu), I also have a running <a href="https://jsfiddle.net/qwypszr8/" rel="nofollow noreferrer">JSFiddle</a> example</p>
  
  <pre><code>&lt;link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'&gt;
  &lt;link rel='stylesheet' href='css/vbfqy.css'&gt;
  
  &lt;style&gt;
  @media (max-aspect-ratio: 1/1) {
    .propor {
      transform: rotate(90deg);
    }
  }
  &lt;/style&gt;
  
  
          &lt;nav class="navbar navbar-default" role="navigation"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                &lt;a class="navbar-brand" href="#" target="_blank"&gt;Brand&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="collapse navbar-collapse" id="navbar-collapse-1"&gt;
                &lt;ul class="nav navbar-nav"&gt;
                  &lt;!-- li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li --&gt;
                  &lt;li class="dropdown"&gt;123&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/nav&gt;
  
  
  &lt;div class="container-fluid" &gt;
  
      &lt;img class="img-responsive propor" src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=600%C3%97350&amp;w=600&amp;h=350"&gt;
  
  &lt;/div&gt;
  
  
    &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'&gt;&lt;/script&gt;
  </code></pre>