Responsive Image Container

Question

Ich versuche, einen Satz von 8 Bildern (alle mit den gleichen Maßen) zu erhalten, um in-line mit gleichen Abständen anzuzeigen und auf die Browserbreite zu reagieren.

Beginnend mit 4 Bildern über 2 Zeilen, dann, wenn die Browser-Breite abnimmt, für sie zu einem bestimmten Punkt schrumpfen, dass sie immer noch deutlich lesbar sind, dann zu 2 Bildern über 4 Zeilen bewegen. Ich habe bemerkt, dass dies ohne Styling funktioniert, aber es hat auch eine Stufe dazwischen, wo es ein Bild auf eine neue Zeile herunterdrückt, also 3-1-3-1. Ich möchte das vermeiden.

Hier ist, woran ich gerade arbeite.

.features { 
 
    width: 100%; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.features img { 
 
    width: 220px; 
 
    margin: 10px; 
 
}

<div class="features"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-lighweight-black.png?9028853389915552257"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-pocket-black.png?9028853389915552257"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-solar-black.png?9028853389915552257"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-battery-black.png?9028853389915552257"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-apple-black.png?9028853389915552257"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-compatible-black.png?9028853389915552257"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-connector-black.png?9028853389915552257"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-led-black.png?9028853389915552257"> 
 
</div>

Hoffnung, die Sinn macht. Ich möchte dies nur mit CSS und HTML tun, vorausgesetzt, das ist möglich.

Answer 1

Ein Rastersystem, das Medienabfragen verwendet, um die Haltepunkte für die Spalten festzulegen, deren Breite geändert werden soll.

CSS-Tricks hat einen guten Artikel über das Rollen Ihrer eigenen Raster hier https://css-tricks.com/dont-overthink-it-grids/.

Oder Sie könnten das gleiche mit flexbox je nach den Support-Einschränkungen tun.

Hinweis: Die Rahmenbox stoppt die Auffülldeklaration und fügt den Spalten zusätzliche Breite hinzu. cf ist ein Clearfix, der den Inhalt des Containers im Verhältnis zu den floatenden Elementen vergrößert. Die Ruhe ist ziemlich geradlinig.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.cf:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
} 
 

 
.cf { 
 
    *zoom: 1; 
 
} 
 

 
.features__col { 
 
    width: 100%; 
 
    float: left; 
 
    padding: 15px; 
 
} 
 

 
.features__col img { 
 
    width: 100%; 
 
} 
 

 
@media (min-width: 400px) { 
 
    .features__col { 
 
    width: 50%; 
 
    } 
 
} 
 

 
@media (min-width: 800px) { 
 
    .features__col { 
 
    width: 25%; 
 
    } 
 
}

<div class="features cf"> 
 
    <div class="features__col"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" /> 
 
    </div> 
 
    <div class="features__col"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" /> 
 
    </div> 
 
    <div class="features__col"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" /> 
 
    </div> 
 
    <div class="features__col"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" /> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

, wenn Sie wollen, dass die Bilder, die Sie schrumpfen werden einige Stützpunkte mit Medienanfragen festlegen müssen und versuchen, diese mit Flexbox

.features{ 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-between; 

} 
.features img { 
    padding: 10px; 
    width: 310px; 
    height: 381px; 
} 

@media all and (max-width: 600px) { 
    .features img { 
    width: 50%; 
    height: 50%; 
    } 

Answer 3

Versuchen:

.col { 
 
    width: 25%; 
 
    float: left; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
} 
 

 
@media screen and (max-width: 1285px) { 
 
    .col { 
 
    width: 50%; 
 
    float: left; 
 
    } 
 
} 
 

 
@media screen and (max-width: 670px) { 
 
    .col { 
 
    width: auto; 
 
    float: none; 
 
    } 
 
    img { 
 
    min-width: 220px; 
 
    } 
 
} 
 
@media screen and (max-width: 365px) { 
 
    img { 
 
    
 
    width:100%; 
 
    } 
 
}

<div class="features"> 
 

 
    <div class="col"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-lighweight-black.png?9028853389915552257"> 
 
    </div> 
 

 
    <div class="col"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-pocket-black.png?9028853389915552257"> 
 
    </div> 
 

 
    <div class="col"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-solar-black.png?9028853389915552257"> 
 
    </div> 
 

 
    <div class="col"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-battery-black.png?9028853389915552257"> 
 
    </div> 
 

 
    <div class="col"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-apple-black.png?9028853389915552257"> 
 
    </div> 
 

 
    <div class="col"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-compatible-black.png?9028853389915552257"> 
 
    </div> 
 

 
    <div class="col"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-connector-black.png?9028853389915552257"> 
 
    </div> 
 

 
    <div class="col"> 
 
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-led- 
 
\t \t black.png?9028853389915552257"> 
 
    </div> 
 

 
</div>