84 lines
2.7 KiB
HTML
84 lines
2.7 KiB
HTML
<!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>
|