Question

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

是否有可能让它看起来总是如下图所示？

我需要在这张照片上制作它（一行4块）：

enter image description here

代码：

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，我的行宽应为25％如果你想要5列图像的高度应该是20％通常决定其中的图像数量，简单地创建一个具有该行数n列的表

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％并浮动它们（如果使用float，请不要忘记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以查看其外观。

修改如果您不希望连续四个图像具有较小的屏幕尺寸，但实际上只需要连续两个图像，则需要使用CSS媒体查询并将内部div的宽度设置为50％（50 * 2） = 100）。

如何使图像块填充100％宽度的屏幕，以适应所有分辨率？

3 个答案: