title: Django/ HTML image is breaking and size of image is not ok
body: <p><a href="https://i.stack.imgur.com/xk3cW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xk3cW.png" alt="issue" /></a></p>
  <p>hi all,</p>
  <p>I am developing locally Django site, seems I have two issues here:</p>
  <ol>
  <li>One picture on top is like 4 times smaller that original picture, original is size  610x 150px.
  I would like to have my picture on page same size as original, how I can do it?</li>
  <li>Picture below&quot; About us&quot; seems has no gap on right side, on left side you can see gap between picture and square. Also this is working fine on full screen but when I make page smaller above mentioned happens. Do you know reason?</li>
  </ol>
  <p>base.html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;Django Central&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; 
          href=&quot;https://fonts.googleapis.com/css?family=Tangerine&quot;&gt; 
          &lt;meta name=&quot;google&quot; content=&quot;notranslate&quot; /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm&quot;
              crossorigin=&quot;anonymous&quot; /&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;style&gt;
              body {
              font-family: &quot;Tangerine&quot;, serif;
              font-size: 37;
              background-color: #fdfdfd;
          }
          .shadow {
              box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
          }
          .btn-danger {
              color: #fff;
              background-color: #f00000;
              border-color: #dc281e;
          }
          .masthead {
              background: #3398E1;
              height: auto;
              padding-bottom: 15px;
              box-shadow: 0 16px 48px #E3E7EB;
              padding-top: 10px;
          }
          img {
              width: 610px;
              height: 150px;
              object-fit: contain; 
      &lt;/style&gt;
          {% load static %}
                 &lt;center&gt; &lt;img src=&quot;{% static 'blog/moj.png' %}&quot; alt=&quot;My image&quot;&gt; &lt;/center&gt;
  
          &lt;!-- Navigation --&gt;
          &lt;nav class=&quot;navbar navbar-expand-sm navbar-light bg-light shadow&quot; id=&quot;mainNav&quot;&gt;
              &lt;div class=&quot;container-fluid&quot;&gt;
                  
                  &lt;a class=&quot;navbar-brand&quot; href=&quot;{% url 'home' %}&quot;&gt;Django central&lt;/a&gt;
                  &lt;button class=&quot;navbar-toggler navbar-toggler-right&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarResponsive&quot;
                      aria-controls=&quot;navbarResponsive&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarResponsive&quot;&gt;
                      &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
                          &lt;li class=&quot;nav-item text-black&quot;&gt;
                              &lt;a class=&quot;nav-link text-black font-weight-bold&quot; href=&quot;#&quot;&gt;About&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item text-black&quot;&gt;
                              &lt;a class=&quot;nav-link text-black font-weight-bold&quot; href=&quot;#&quot;&gt;Policy&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item text-black&quot;&gt;
                              &lt;a class=&quot;nav-link text-black font-weight-bold&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          {% block content %}
          &lt;!-- Content Goes here --&gt;
          {% endblock content %}
          &lt;!-- Footer --&gt;
          &lt;footer class=&quot;py-3 bg-grey&quot;&gt;
              &lt;p class=&quot;m-0 text-dark text-center &quot;&gt;Copyright &amp;copy; Django Central&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>index.html:</p>
  <pre><code>{% extends &quot;base.html&quot; %} 
  {% block content %}
  &lt;style&gt;
      body {
          font-family: &quot;Roboto&quot;, sans-serif;
          font-size: 18px;
          background-color: #fdfdfd;
      }
      
      .head_text {
          color: black;
      }
      
      .card {
          box-shadow: 0 16px 48px #E3E7EB;
      }
  &lt;/style&gt;
  
  &lt;header class=&quot;masthead&quot;&gt;
      &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot; col-md-8 col-md-10 mx-auto&quot;&gt;
                  &lt;div class=&quot;site-heading&quot;&gt;
                      &lt;h3 class=&quot; site-heading my-4 mt-3 text-black&quot;&gt; Welcome to my awesome Blog &lt;/h3&gt;
                      &lt;p class=&quot;text-light&quot;&gt;We Love Django As much as you do..! &amp;nbsp
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;!-- Blog Entries Column --&gt;
          &lt;div class=&quot;col-md-8 mt-3 left&quot;&gt;
              {% for post in post_list %}
              &lt;div class=&quot;card mb-4&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                      &lt;h2 class=&quot;card-title&quot;&gt;{{ post.title }}&lt;/h2&gt;
                      &lt;p class=&quot;card-text text-muted h6&quot;&gt;{{ post.author }} | {{ post.created_on}} &lt;/p&gt;
                      &lt;p class=&quot;card-text&quot;&gt;{{post.content|slice:&quot;:200&quot; }}&lt;/p&gt;
                      &lt;a href=&quot;{% url 'post_detail' post.slug  %}&quot; class=&quot;btn btn-primary&quot;&gt;Read More &amp;rarr;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              {% endfor %}
          &lt;/div&gt;
          {% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
      &lt;/div&gt;
  &lt;/div&gt;
  {%endblock%}
  </code></pre>
  <p>sidebar.html:</p>
  <pre><code>{% block sidebar %}
  
  &lt;style&gt;
          .card{
              box-shadow: 0 16px 48px #E3E7EB;
          }
         img {
              width: 200px;
              height: 300px;
              object-fit: contain;        
  &lt;/style&gt;
  
  &lt;!-- Sidebar Widgets Column --&gt;
  &lt;div class=&quot;col-md-4 float-right &quot;&gt;
  &lt;div class=&quot;card my-4&quot;&gt;
          &lt;h5 class=&quot;card-header&quot;&gt;About Us&lt;/h5&gt;
      &lt;div class=&quot;card-body&quot;&gt;
          {% load static %}
          &lt;center&gt;&lt;img src=&quot;{% static 'blog/zdjecie.png' %}&quot; alt=&quot;My image&quot;&gt;&lt;/center&gt;
          &lt;p class=&quot;card-text&quot;&gt; This awesome blog is made on the top of our Favourite full stack Framework 'Django', follow up the tutorial to learn how we made it..!&lt;/p&gt;
          &lt;a href=&quot;https://djangocentral.com/building-a-blog-application-with-django&quot;
             class=&quot;btn btn-danger&quot;&gt;Know more!&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  {% endblock sidebar %}
  </code></pre>