html - 如何使 img block 填充 100% 宽度的屏幕并适应所有分辨率？

Question

我如何制作适合任何分辨率的 img block 并始终填充屏幕的 100% 宽度？

是否可以让它看起来一直像下图那样？

我需要像这张照片一样(一行 4 个方 block ):

代码:

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

您可以在 100% with wrapper div 中将图像向左浮动。然后给它们 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;
}