如何使img塊填充100％寬度的屏幕並適合所有分辨率？

Question

我如何製作適合任何分辨率的img塊並始終填充100％寬度的屏幕？

它可能會讓它看起來總是像下面的圖片？

我需要使它喜歡上了這一個照片（4塊一排）：

代碼：

HTML

  <section id="realizacje" data-speed="10" data-type="background"> 
       <article> 
        <div class="pasek_suwakow" style="top: 190px;"> 
        <a href="#marki"><div class="suwak_gora"></div></a> 
        <a href="#manifest"><div class="suwak"></div></a> 
        <a href="#wspolpraca"><div class="suwak"></div></a> 
        <a href="#realizacje"><div class="suwak_wybrane"></div></a> 
        <a href="#kontakt"><div class="suwak_dol"></div></a> 
        </div> 

        <div id="realizacjebody"> 
         <div id="realizacjeheadline">WYBRANE REALIZACJE</div> 
         <div id="przerywnik_realizacje"></div> 
        </div> 


        <div id="wybranerealizacje"> 

         <div class="realizacjawrapper"> 
          <div class="realizacjaimg"><img src="images/zephyr1.jpg"></div> 
          <div class="realizacjatext"><b class="regular">Zephyr</b><br></br>Ogrzewacz powietrza na pelet zaprojektowany na potrzeby marki MZ. <br><br>Wzór opracowany w 2013 roku.</div> 
         </div> 
         <div class="realizacjawrapper"> 
          <div class="realizacjaimg"><img src="images/cedar1.jpg"></div> 
          <div class="realizacjatext"><b class="regular">Cedar</b><br></br>Kominek na drewno MZ z płaszczem wodnym.<br></br>Opracowany z myślą o małym domu lub jako komplementarne źródło ciepła.</div> 
         </div> 
         <div class="realizacjawrapper"> 
          <div class="realizacjaimg"><img src="images/idro18.jpg"></div> 
          <div class="realizacjatext"><b class="regular">IdroBox Evo 18</b><br></br>Klasyczny kocioł na pelet marki MZ.<br></br></div> 
         </div> 
         <div class="realizacjawrapper"> 
          <div class="realizacjaimg"><img src="images/idro22.jpg"></div> 
          <div class="realizacjatext"><b class="regular">IdroBox Evo 22</b><br></br>Klasyczny kocioł na pelet marki MZ<br></br>Młodszy ale silniejszy brat IdroBox Evo 18</div> 
         </div> 
         <div class="realizacjawrapper"> 
          <div class="realizacjaimg"><img src="images/idro32.jpg"></div> 
          <div class="realizacjatext"><b class="regular">IdroBox Evo 32</b><br></br>Klasyczny kocioł na pelet marki MZ<br></br>Najmocniejszy płaszcz wodny w całym zestawieniu MZ. Moc w formie.</div> 
         </div> 
         <div class="realizacjawrapper"> 
          <div class="realizacjaimg"><img src="images/MZT1.jpg"></div> 
          <div class="realizacjatext"><b class="regular">AirBox 22</b><br></br>Ogrzewacz powietrza opracowany na potrzeby marki MZT.<br></br>Przeznaczony do ogrzewania przestrzeni przemysłowych i użytkowych.</div> 
         </div> 
         <div class="realizacjawrapper"> 
          <div class="realizacjaimg"><img src="images/verbier.jpg"></div> 
          <div class="realizacjatext"><b class="regular">Verbier</b><br></br>Kocioł na pelet marki MZ.<br></br> Forma urządzenia RTV/AGD pozwala na umieszczenie w przestrzeni mieszkalnej lub kuchennej. Nasza mała rewolucja w ogrzewnictwie.</div> 
         </div> 
         <div class="realizacjawrapper"> 
          <div class="realizacjaimg"><img src="images/aria3.jpg"></div> 
          <div class="realizacjatext"><b class="regular">Aria 4D</b><br></br>Ogrzewacz powietrza na pelet marki MZ.<br></br>Konstrukcja umożliwia rozprowadzenie ciepła po domu przy pomocy kanałów wentylacyjnych.</div> 
         </div> 

        </div> 

       <div class="strzalkawdol" style="top: 750px;"><a href="#kafelobraz3"><img src="images/przejdz.png" alt="Nebiolo"><div class="przejdz"></div></a></div> 

       </article> 
      </section> 

CSS

  #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; 
      } 

Answer 1

您可以使用包裝div將圖像浮動到100％左側。然後給他們width:25%;和height:auto;

看到這個FIDDLE

HTML：

<div id="top">WYBRANE REALIZACJE</div> 
<div id="img_wrapper"> 
    <img src="http://placekitten.com/200/300"/> 
    <img src="http://placekitten.com/g/200/300"/> 
    <img src="http://placekitten.com/200/300"/> 
    <img src="http://placekitten.com/g/200/300"/> 
    <img src="http://placekitten.com/200/300"/> 
    <img src="http://placekitten.com/g/200/300"/> 
    <img src="http://placekitten.com/200/300"/> 
    <img src="http://placekitten.com/g/200/300"/> 
</div> 

CSS：

#top{ 
    height:150px; 
    width:100%; 
    line-height:150px; 
    text-align:center; 
} 
#img_wrapper{ 
    width:100%; 
} 
img{ 
    display:block; 
    float:left; 
    width:25%; 
    height:auto; 
} 

在該溶液適應你的代碼，你只需要添加width:25%;至.realizacjawrapper 和這個

.realizacjaimg img{ 
    width:100%; 
    height:auto 
    display:block; 
} 

Answer 2

對於每個IMG得到的高度和寬度的百分比而不是像素 如果ü希望4個IMGS IA行寬度應爲25％ 如果ü希望在柱高度5倍的圖像應該是20％ 中通常會決定其中的圖像數量簡單地創建一個具有該行數的表格n colums

Answer 3

如果您只需要連續放置4張圖像，則可以將每張圖像的寬度設置爲25％，這樣可以將100％總計：

<div class="image"> 
    <div class="image__item"> 
     <img src="http://placehold.it/300x500" alt="Placeholder"> 
    </div> 
    <div class="image__item"> 
     <img src="http://placehold.it/300x500" alt="Placeholder"> 
    </div> 
    <!-- ... more images ... --> 
</div> 

然後你只需要在每個內部div的寬度設置爲25％和上浮他們（不要忘記，如果你正在使用浮動的clearfix）：

.image__item { 
    width: 25%; /* four images in a row: 25 * 4 = 100 */ 
    float: left; /* display in one line */ 
} 

爲了確保這些div裏面的圖片不溢出他們的父母，你可以添加這個CSS：

img { 
    max-width: 100%; /* set the max-width to 100% of parent */ 
    height: auto; /* don't distort the images */ 
    vertical-align: top; /* remove gap below each image */ 
} 

你可以看看看看這個Fiddle來看看它的外觀。

編輯： 如果你不希望在與小屏幕尺寸的四倍連勝的圖像，但在一排instace只有兩個，你需要使用CSS媒體查詢，並設置內部的div的寬度到50％（50 * 2 = 100）。