samalyx
/
credit.jaxoff.tv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

This commit is contained in:
Sam Alyx 2025-07-18 13:18:31 +02:00
commit d6e8feff40
2 changed files with 174 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
index.html Normal file
View File

@ -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>

83
test.html Normal file
View File

@ -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>