我在使用Bootstrap 4及其Card图像覆盖时遇到了一些麻烦。基本上，当我使用较宽的分辨率时，一切都很好，但是如果我降低分辨率，那将是一团糟，因为图像的高度并不能覆盖卡片。
我已经解决了添加不同分辨率的媒体查询的问题，但是我不确定这是否是解决问题的正确方法。
body {
background-color: #EEEEEE;
}
.jumboimg {
height: auto;
width: 100%;
}
.nvbr {
background-color: #3E7FE3;
}
.logoicon {
height: 37px;
width: 60px;
}
@media (min-width: 576px) {
.crdbg {
height: 1060px;
}
}
@media (min-width: 1200px) {
.crdbg {
height: auto;
width: 100%;
}
}<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<title></title>
</head>
<body>
<nav class="navbar nvbr navbar-expand-md navbar-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img class="img-fluid logoicon" src="images/logoicon.png" alt="Logo Icon"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav nav-fill w-75 mx-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CHI SIAMO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FISIOTERAPIA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DOVE SIAMO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTATTACI</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid py-0">
<img class="jumboimg" src="https://i.postimg.cc/SQ6sj2J5/hero.jpg" alt="Hero Image">
</div>
<div class="container-fluid px-0">
<div class="row">
<div class="col-12">
<div class="card bg-transparent">
<img class="card-img" src="https://i.postimg.cc/W3p9rJsn/cardbg.jpg" alt="Card Background">
<div class="card-img-overlay">
<div class="card-body">
<div class="card-title text-center mb-4">LA NOSTRA CONCEZIONE DI FISIOTERAPIA</div>
<div class="card-text">
<blockquote class="blockquote">
<p class="font-italic text-justify text-secondary">“Il termine riabilitazione, ri-rendere-abile, in ambito sociosanitario è definito come processo di soluzione dei problemi e di educazione nel corso del quale una persona con patologia è portata a raggiungere il miglior livello di vita possibile sul piano fisico, funzionale, sociale ed emozionale, con la minor restrizione possibile delle sue scelte operative”</p>
<footer class="blockquote-footer"><cite title="Basaglia N.">Basaglia N.</cite></footer>
</blockquote><br><br>
<p class="text-justify text-secondary mb-4">Lo studio fisioterapico BK Rehabilitation opera nell’ambito della cura della persona secondo una visione a 360°.
La convinzione di partenza è porre il paziente al centro del suo percorso riabilitativo, affinché egli divenga non un semplice e mero esecutore ma protagonista fondamentale dell’intervento che si elabora assieme alle figure mediche sanitarie, nel massimo rispetto del suo equilibrio. Studi recenti dimostrano, infatti, quanto la personalizzazione della cura sia fattore necessario e dovuto per una meglio riuscita, sia in termini di tempi che di qualità, del processo riabilitativo.
Presso lo studio una professionista preparata, ed in continuo aggiornamento, prenderà in carico il paziente valutando la sua storia clinica pregressa mediante un’anamnesi approfondita e dettagliata per poi procedere alla diagnosi medica e funzionale fisioterapica. L’attenzione oltre che sulla sintomatologia, punto di partenza, si pone con grande rilievo sull’eziologia, cioè sul perché del disturbo, presupposto, questo, su cui è incentrato il vero successo della terapia.
La nostra concezione terapeutica può essere pertanto cosi espressa in tappe:</p>
<ul>
<li>Diagnosi medica riabilitativa: anamnesi fisiologica, funzionale, patologica remota, patologica prossima e visita;</li>
<li>Progetto riabilitativo personalizzato: bisogni del paziente, outcome funzionale e globale, tempi previsti;</li>
<li>Rieducazione: processo globale e multifattoriale della cura, per il giusto mantenimento dello stato di benessere nel tempo;</li>
</ul>
<p class="text-justify mt-4">Siamo fermamente convinti che la vera cura di successo è un paziente indipendente.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<div class="card-text">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>