title: How to make img blocks to fill 100% width screen and get fit to all resolutions?
body: <p>How i can make img blocks that fit to any resolutions and always fill 100% width of screen?</p>
  
  <p>Is it possiblie to make it to look always like on the picture below?</p>
  
  <p>I need to make it like on this pic (4 blocks in one row):</p>
  
  <p><img src="https://i.stack.imgur.com/JCe3N.png" alt="enter image description here"></p>
  
  <p>Code:</p>
  
  <p>HTML</p>
  
  <pre><code>            &lt;section id="realizacje" data-speed="10" data-type="background"&gt;
                &lt;article&gt;
                    &lt;div class="pasek_suwakow" style="top: 190px;"&gt;
                      &lt;a href="#marki"&gt;&lt;div class="suwak_gora"&gt;&lt;/div&gt;&lt;/a&gt;
                      &lt;a href="#manifest"&gt;&lt;div class="suwak"&gt;&lt;/div&gt;&lt;/a&gt;
                      &lt;a href="#wspolpraca"&gt;&lt;div class="suwak"&gt;&lt;/div&gt;&lt;/a&gt;
                      &lt;a href="#realizacje"&gt;&lt;div class="suwak_wybrane"&gt;&lt;/div&gt;&lt;/a&gt;
                      &lt;a href="#kontakt"&gt;&lt;div class="suwak_dol"&gt;&lt;/div&gt;&lt;/a&gt;
                    &lt;/div&gt;
  
                      &lt;div id="realizacjebody"&gt;
                          &lt;div id="realizacjeheadline"&gt;WYBRANE REALIZACJE&lt;/div&gt;
                          &lt;div id="przerywnik_realizacje"&gt;&lt;/div&gt;
                      &lt;/div&gt;
  
  
                      &lt;div id="wybranerealizacje"&gt;
  
                          &lt;div class="realizacjawrapper"&gt;
                              &lt;div class="realizacjaimg"&gt;&lt;img src="images/zephyr1.jpg"&gt;&lt;/div&gt;
                              &lt;div class="realizacjatext"&gt;&lt;b class="regular"&gt;Zephyr&lt;/b&gt;&lt;br&gt;&lt;/br&gt;Ogrzewacz powietrza na pelet zaprojektowany na potrzeby marki MZ. &lt;br&gt;&lt;br&gt;Wzór opracowany w 2013 roku.&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="realizacjawrapper"&gt;
                              &lt;div class="realizacjaimg"&gt;&lt;img src="images/cedar1.jpg"&gt;&lt;/div&gt;
                              &lt;div class="realizacjatext"&gt;&lt;b class="regular"&gt;Cedar&lt;/b&gt;&lt;br&gt;&lt;/br&gt;Kominek na drewno MZ z płaszczem wodnym.&lt;br&gt;&lt;/br&gt;Opracowany z myślą o małym domu lub jako komplementarne źródło ciepła.&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="realizacjawrapper"&gt;
                              &lt;div class="realizacjaimg"&gt;&lt;img src="images/idro18.jpg"&gt;&lt;/div&gt;
                              &lt;div class="realizacjatext"&gt;&lt;b class="regular"&gt;IdroBox Evo 18&lt;/b&gt;&lt;br&gt;&lt;/br&gt;Klasyczny kocioł na pelet marki MZ.&lt;br&gt;&lt;/br&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="realizacjawrapper"&gt;
                              &lt;div class="realizacjaimg"&gt;&lt;img src="images/idro22.jpg"&gt;&lt;/div&gt;
                              &lt;div class="realizacjatext"&gt;&lt;b class="regular"&gt;IdroBox Evo 22&lt;/b&gt;&lt;br&gt;&lt;/br&gt;Klasyczny kocioł na pelet marki MZ&lt;br&gt;&lt;/br&gt;Młodszy ale silniejszy brat IdroBox Evo 18&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="realizacjawrapper"&gt;
                              &lt;div class="realizacjaimg"&gt;&lt;img src="images/idro32.jpg"&gt;&lt;/div&gt;
                              &lt;div class="realizacjatext"&gt;&lt;b class="regular"&gt;IdroBox Evo 32&lt;/b&gt;&lt;br&gt;&lt;/br&gt;Klasyczny kocioł na pelet marki MZ&lt;br&gt;&lt;/br&gt;Najmocniejszy płaszcz wodny w całym zestawieniu MZ. Moc w formie.&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="realizacjawrapper"&gt;
                              &lt;div class="realizacjaimg"&gt;&lt;img src="images/MZT1.jpg"&gt;&lt;/div&gt;
                              &lt;div class="realizacjatext"&gt;&lt;b class="regular"&gt;AirBox 22&lt;/b&gt;&lt;br&gt;&lt;/br&gt;Ogrzewacz powietrza opracowany na potrzeby marki MZT.&lt;br&gt;&lt;/br&gt;Przeznaczony do ogrzewania przestrzeni przemysłowych i użytkowych.&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="realizacjawrapper"&gt;
                              &lt;div class="realizacjaimg"&gt;&lt;img src="images/verbier.jpg"&gt;&lt;/div&gt;
                              &lt;div class="realizacjatext"&gt;&lt;b class="regular"&gt;Verbier&lt;/b&gt;&lt;br&gt;&lt;/br&gt;Kocioł na pelet marki MZ.&lt;br&gt;&lt;/br&gt; Forma urządzenia RTV/AGD pozwala na umieszczenie w przestrzeni mieszkalnej lub kuchennej. Nasza mała rewolucja w ogrzewnictwie.&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="realizacjawrapper"&gt;
                              &lt;div class="realizacjaimg"&gt;&lt;img src="images/aria3.jpg"&gt;&lt;/div&gt;
                              &lt;div class="realizacjatext"&gt;&lt;b class="regular"&gt;Aria 4D&lt;/b&gt;&lt;br&gt;&lt;/br&gt;Ogrzewacz powietrza na pelet marki MZ.&lt;br&gt;&lt;/br&gt;Konstrukcja umożliwia rozprowadzenie ciepła po domu przy pomocy kanałów wentylacyjnych.&lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                 &lt;div class="strzalkawdol" style="top: 750px;"&gt;&lt;a href="#kafelobraz3"&gt;&lt;img src="images/przejdz.png" alt="Nebiolo"&gt;&lt;div class="przejdz"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
  
                &lt;/article&gt;
              &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>            #realizacje article{
              height: 658px;
              position: absolute; 
              top: 100px;
              width: 100%; 
              text-align: center;
              font-size: 21px;
              color: #777777;
              font-family: sspro-light;
              }
  
              #realizacjebody{
              width: 100%;
              position: absolute;
              }
  
  
              #realizacjeheadline{
              margin-bottom: 10px;
              text-align: center;
              position: relative;
              font-size: 14px;
              }
  
              #wybranerealizacje{
              /* width: 1220px; */
              width: 100%;
              position: relative;
              top: 80px;
              margin: 0 auto;
              height: 800px;
              background: green;
              }
  
              .realizacjawrapper{
              width: 300px;
              height: 376px;
              position: relative;
              float: left;
              }
  
              .realizacjaimg{
              position: absolute;
              max-width: 100%; 
              max-height: 100%;
              overflow: hidden;
              }
  
              .realizacjatext{
              position: absolute;
              background: #36657b;
              color: white;
              width: 280px;
              height: 50%;
              margin-top: 56%;
              font-size: 14px;
              text-align: left;
              padding: 10px;
              }
  </code></pre>