Container probleme

[Nixblick]

Hallo,
ich bin hier neu und hab kaum Ahnung von HTML.

Mein Problem:
Die Firmen werden auf meiner Startseite mit Lücken dargestellt (siehe unten). Es werden auch die Images nicht in gewünschter Grösse eingeblendet.
Der Code der index.php:
---------------------------------------------------------------------
<div class="heading">
<div class="container">
<div class="row"><h1><?php echo CBE1_HOME_FEATURED_STORES; ?></h1></div>
</div>
</div>

<div class="brands-section">
<div class="container">
<div class="row">

<?php while ($row_featured = mysqli_fetch_array($result_featured)) { ?>
<div class="brands-ctnr"><a href="<?php echo GetRetailerLink($row_featured['retailer_id'], $row_featured['title']); ?>"><img src="<?php if (!stristr($row_featured['image'], 'http')) echo SITE_URL."img/"; echo $row_featured['image']; ?>" width="<?php echo IMAGE_WIDTH; ?>" height="<?php echo IMAGE_HEIGHT; ?>" alt="<?php echo $row_featured['title']; ?>" border="0"></a><h4 class="hidden-xs"><?php echo $row_featured['title']; ?></h4>
<?php if ($row_featured['cashback'] != "") { ?>
<span class="cashback hidden-xs"><span class="value"><?php echo DisplayCashback($row_featured['cashback']); ?> <?php echo CBE1_CASHBACK; ?></span></span>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
</div>
<?php
}
} // end featured retailers
-------------------------------------------------------------------------------
Ich weiss nicht, ob ich alles Wichtige darstellen konnte.
Für Hilfe bin ich dankbar

 

[MrMurphy]

Hallo

Wenn die Bilder gleich hoch sein sollen musst du sie in einem Grafikprogramm entsprechend bearbeiten.

Wenn die Bilder trotz ungleicher Höhe ohne Lücken nebeneinander angezeigt werden sollen musst du im CSS statt Float entweder Flexbox oder CSS-Grid verwenden.

Gruss

MrMurphy

 

[Nixblick]

Hallo MrMurphy,
Danke für deine Antwort.
Ich habe da nichts gefunden. Die Breite haut ja hin, das Problem liegt an der Höhe. Admin-Technisch kann ich angeben, in welcher Höhe ich die Bilder anzeigen lassen möchte. Dies wird aber bei der wiedergabe der Bilder ignoriert.
Wie gesagt:" ich bin totaler Laie".

 

[Sailor]

Admin-Technisch kann ich angeben, in welcher Höhe ich die Bilder anzeigen lassen möchte.

Ja.. kannst du! Aber bei Beibehaltung der Breite führt eine Festlegung der Höhe zu Verzerrung des Bildes - keine gute Idee :(!

Dies wird aber bei der wiedergabe der Bilder ignoriert.

Dann machst du was verkehrt! Ein Link zur Seite wäre hilfreich, um dir zu helfen.

 

[scbawik]

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

 

[Nixblick]

Hier mal der Link zur Seite
(von Blicknix gelöscht)

 

[Nixblick]

hier mal die css:

(von Blicknix gelöscht)

 

[Nixblick]

Hier mal die Index:

(von Blicknix gelöscht)

 

[MrMurphy]

Hallo

Konkret folgende CSS-Anweisung in eine von den CSS-Dateien schreiben:

.brands-section .row {
   display: flex;
   flex-wrap: wrap
}

Dafür kann folgende CSS-Anweisung entfernt werden:

.brands-ctnr {
   ...
   float: left;
   ...
}

Zudem sind die clear-Anweisungen für das gelöschte Float nicht mehr notwendig.

Gruss

MrMurphy

 

[Nixblick]

Problem gelöst, vielen Dank an euch alle, besonders an MrMurphy.