Hallo zusammen,
ich habe eine Seite mit Referenzen, die natürlich Bilder von der fertigen Arbeit enthalten. Die Bilder sind aber mal im Hoch- und mal im Querformat., also unterschiedliche Breite und Höhe.
Die Seite ist kategorisiert in einzelne Themenbereiche. Der einzelne Themenbereich wiederum hat jeweils zwei Bilder nebeneinander unter sich.
HTML:
Code
<!-- REFERENZEN -->
<section id="referenz-bereich">
<div class="container">
<div class="row">
<div class="col-6">
<header class="intro-container">
<h1>Referenzen</h1>
<p>
Wir möchten Ihnen hier fortlaufend und aktualisiert gern einige Arbeiten von unserem angebotenen Leistungsspektrum präsentieren.
</p>
<p>
Zögern Sie nicht uns anzusprechen, wir sind uns sicher, Ihnen bei Ihren Bauvorhaben erfolgreich unterstützen zu können.
</p>
</header>
</div>
</div>
<article class="referenz-bilder">
<div class="container">
<div class="row">
<div class="col-6">
<h2 id=dacharbeiten-referenz>Dacharbeiten und Neubau</h2>
<div class="col-3">
<img src="./src/img/dacharbeiten_1.webp" alt="Sanierung und Neubau">
</div>
<div class="col-3">
<img src="./src/img/dacharbeiten_2.webp" alt="Sanierung und Neubau">
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<h2 id=flachdachabdichtungen-referenz>Flachdachabdichtungen</h2>
<div class="col-3">
<img src="./src/img/flachdachabdichtungen_1.webp" alt="Flachdachabdichtungen_1">
</div>
<div class="col-3">
<img src="./src/img/flachdachabdichtungen_2.webp" alt="Flachdachabdichtungen_2">
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<h2 id=dachklempnerei-referenz>Dachklempnerei</h2>
<div class="col-3">
<img src="./src/img/dachklempnerei_1.webp" alt="Flachdachabdichtungen_1">
</div>
<div class="col-3">
<img src="./src/img/dachklempnerei_2.webp" alt="Flachdachabdichtungen_2">
</div>
<div class="col-3">
<img src="./src/img/dachklempnerei_3.webp" alt="Flachdachabdichtungen_1">
</div>
<div class="col-3">
<img src="./src/img/dachklempnerei_4.webp" alt="Flachdachabdichtungen_1">
</div>
<div class="col-3">
<img src="./src/img/dachklempnerei_5.webp" alt="Flachdachabdichtungen_1">
</div>
<div class="col-3">
<img src="./src/img/dachklempnerei_6.webp" alt="Flachdachabdichtungen_1">
</div>
<div class="col-3">
<img src="./src/img/dachklempnerei_7.webp" alt="Flachdachabdichtungen_1">
</div>
</div>
</div>
</div>
</article>
</div>
</section>CSS:
Code
/* === REFRENZEN === */
#referenz-bereich {
padding-top: 1rem;
}
@media (max-width: 1024px) {
#referenz-bereich {
padding-bottom: 4rem;
}
}
@media (max-width: 866px) {
#referenz-bereich {
padding-bottom: 5rem;
}
}
@media (max-width: 768px) {
#referenz-bereich {
padding-bottom: 0;
}
}
#dacharbeiten-referenz, #dachklempnerei-referenz, #flachdachabdichtungen-referenz {
text-align: center;
}
#referenz-bereich img {
display: inline-block;
width: auto;
height: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
max-height: 6000px;
}
/* === GRID-SYSTEM === */
.container {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*='col-'] {
float: left;
min-height: 1px;
padding: .8rem;
}
.col-1 { width: 16.666%; }
.col-2 { width: 33.333%; }
.col-3 { width: 50%; }
.col-4 { width: 66.666%; }
.col-6 { width: 100%; }
@media (max-width: 1024px) {
.col-1 { width: 33.333%; }
}
@media (max-width: 768px) {
.col-1 { width: 50%; }
.col-2 { width: 100%; }
.col-3 { width: 100%; }
.col-4 { width: 100%; }
}
@media (max-width: 480px) {
.col-1 { width: 100%; }
.col-2 { width: 100%; }
.col-3 { width: 100%; }
.col-4 { width: 100%; }
}Kann ich die Bilder noch irgendwie auf eine Höhe / Breite bringen? Wenn ich die Bilder im Hochformat auf die Höhe der im Querformat ändere, dann passt das zwar, aber dann ist zu viel Platz nach außen, das sieht dann auch blöd aus...
Hat jemand einen Lösungsansatz für mich?
Danke,
Erik
