如何使 img 块填充 100% 宽度的屏幕并适应所有分辨率？答案

【问题标题】：How to make img blocks to fill 100% width screen and get fit to all resolutions?如何使 img 块填充 100% 宽度的屏幕并适应所有分辨率？
【发布时间】：2014-01-10 18:34:20
【问题描述】：

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

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

我需要像这张照片一样（一行 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;
            }

【问题讨论】：

是否必须将整个屏幕高度填充到或是否可以用滚动条溢出底部？
为了确保您的代码适用于所有分辨率，请始终以相对于外部 div 的百分比指定 div 的宽度和高度。还要在 HTML 图像中查找保持纵横比，以确保始终保持纵横比
移动版也需要四列图片吗？或者，如果您调整浏览器窗口的大小，列的数量会发生变化吗？
它应该总是填满整个宽度，并且总是在一行中放置 4 张图像。

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

对于每个img，以百分比而不是像素给出高度和宽度如果你想要 4 张图片，我的行宽应该是 25% 如果你想要 5 个图像的列高应该是 20% 通常决定其中的图像数量很简单，创建一个包含行数 n 列的表

【讨论】：

【解决方案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 看看它的样子。

编辑： 如果您不希望屏幕尺寸较小的连续四张图像，而是连续两张用于实例，则需要使用 CSS 媒体查询并将内部 div 的宽度设置为 50% (50 * 2 = 100 )。

【讨论】：