first commit
This commit is contained in:
commit
d6e8feff40
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Liste mit zentrierten Bildern</title>
|
||||
<link href="https://bootswatch.com/5/darkly/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--img-height: 12.5em;
|
||||
--max-img-width: 18.75em; /* So breit wie das breiteste Bild */
|
||||
}
|
||||
|
||||
.image-box {
|
||||
height: var(--img-height);
|
||||
width: var(--max-img-width);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #222222;
|
||||
border: 1px solid #222222;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.image-box img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container py-5">
|
||||
|
||||
<!-- Sektion 1 -->
|
||||
<div class="row align-items-center mb-5">
|
||||
<div class="col-md-4 d-flex justify-content-center">
|
||||
<div class="image-box">
|
||||
<img src="https://samalyx.gay/i/background.png" alt="Bild 1" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2>Titel 1</h2>
|
||||
<p class="text-muted">Dies ist eine kurze Beschreibung.</p>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#">🔗 Link A</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sektion 2 -->
|
||||
<div class="row align-items-center mb-5">
|
||||
<div class="col-md-4 d-flex justify-content-center">
|
||||
<div class="image-box">
|
||||
<img src="https://ref.jaxoff.tv/img/jax.png" alt="Bild 2" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2>Titel 2</h2>
|
||||
<p class="text-muted">Kleineres Bild, aber trotzdem zentriert im Container.</p>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#">🔗 Link B</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sektion 3 -->
|
||||
<div class="row align-items-center mb-5">
|
||||
<div class="col-md-4 d-flex justify-content-center">
|
||||
<div class="image-box">
|
||||
<img src="https://storage.googleapis.com/vgen-production-storage/uploads/8cfb49b3-ea07-47d1-9737-56f7f0396945/services/3ecb2bfd-0a25-4039-acc3-951fe270b795.webp" alt="Bild 2" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2>Titel 3</h2>
|
||||
<p class="text-muted">Kleineres Bild, aber trotzdem zentriert im Container.</p>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#">🔗 Link B</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weitere Sektionen hier -->
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Grid mit unbeschnittenen Bildern</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
.card-img-wrapper {
|
||||
height: 200px;
|
||||
background-color: #f8f9fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-img-wrapper img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container py-5">
|
||||
<div class="row g-4">
|
||||
|
||||
<!-- Karte 1 -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-img-wrapper">
|
||||
<img src="https://storage.googleapis.com/vgen-production-storage/uploads/8cfb49b3-ea07-47d1-9737-56f7f0396945/services/3ecb2bfd-0a25-4039-acc3-951fe270b795.webp" alt="Bild 1">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Titel 1</h5>
|
||||
<p class="card-text text-muted">Bild mit Standardverhältnis.</p>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li><a href="#">🔗 Link A</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karte 2 -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-img-wrapper">
|
||||
<img src="https://via.placeholder.com/300x700" alt="Bild 2">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Titel 2</h5>
|
||||
<p class="card-text text-muted">Sehr hohes Bild – trotzdem zentriert & sichtbar.</p>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li><a href="#">🔗 Link B</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karte 3 -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-img-wrapper">
|
||||
<img src="https://via.placeholder.com/1000x300" alt="Bild 3">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Titel 3</h5>
|
||||
<p class="card-text text-muted">Panoramabild – vollständig skaliert.</p>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li><a href="#">🔗 Link C</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue