title: Thumbnails not carrying over CSS in Umbraco 7
body: <p>I'm having trouble making my thumbnails behave correctly in my Umbraco project. </p>
  
  <p>I'm using a for loop to display the thumbnails from a multiple media picker property editor. </p>
  
  <pre><code>&lt;ul class="hide-bullets"&gt;
                          @for (var i = 0; i &lt; images.Count; i++)
                          {
                          &lt;li class=""&gt;
                              &lt;a class="thumbnail" id="carousel-selector-@i"&gt;&lt;img class="thumbnail-img" src='@images[i].Url'&gt;&lt;/a&gt;
                          &lt;/li&gt;
                          }
                      &lt;/ul&gt;
  </code></pre>
  
  <p>My original template just uses static images:</p>
  
  <pre><code>&lt;ul class="hide-bullets"&gt;
                                  &lt;li class=""&gt;
                                      &lt;a class="thumbnail" id="carousel-selector-0"&gt;&lt;img class="thumbnail-img" src="images/sommerhuse/ebeltoft/1.jpg"&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class=""&gt;
                                      &lt;a class="thumbnail" id="carousel-selector-1"&gt;&lt;img class="thumbnail-img" src="images/sommerhuse/ebeltoft/2.jpg"&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class=""&gt;
                                      &lt;a class="thumbnail" id="carousel-selector-2"&gt;&lt;img class="thumbnail-img" src="images/sommerhuse/ebeltoft/3.jpg"&gt;&lt;/a&gt;
                                  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have included the exact same CSS files in each project, but they're displayed differently on the page.</p>
  
  <p>This is how they look in my original template: <a href="https://i.imgur.com/WokI5GP.png" rel="nofollow noreferrer">http://i.imgur.com/WokI5GP.png</a></p>
  
  <p>And this is how they look in my Umbraco project: <a href="https://i.imgur.com/LbZaDS9.png" rel="nofollow noreferrer">http://i.imgur.com/LbZaDS9.png</a></p>
  
  <p>The "thumnail-img" class that is added to images does only 2 things:</p>
  
  <pre><code>.thumbnail-img {
    width: 100% !important;
    height: 100% !important;
  }
  </code></pre>
  
  <p>Both projects include images with differing resolutions.</p>
  
  <p>What could be the cause of this? Is Umbraco overwriting my styles, or does the media picker change how the images are being displayed?</p>