Good morning folks, sto cercando di inserire una Card di Bootstrap 4 con overlay (immagine di sfondo con testo sopra) nel mio sito e fin quando rimango su risoluzioni ampie va tutto liscio, ma se passo a risoluzioni basse va tutto fuori posto.
Ho capito che il problema è dipeso dall'immagine che non si ridimensiona, infatti se la tolgo va tutto bene. Ho provato varie cose tipo "img-fluid" (classe di Bootstrap 4 per rendere le immagini responsive), ho impostato width: 100%; e height: auto;, ho provato ad impostare l'altezza nelle media queries ma nulla.
Suggerimennti?
Ho capito che il problema è dipeso dall'immagine che non si ridimensiona, infatti se la tolgo va tutto bene. Ho provato varie cose tipo "img-fluid" (classe di Bootstrap 4 per rendere le immagini responsive), ho impostato width: 100%; e height: auto;, ho provato ad impostare l'altezza nelle media queries ma nulla.
HTML:
<!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="css/bootstrap.css">
<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 type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Codice:
body {
background-color: #EEEEEE;
}
.jumboimg {
width: 100%;
height: auto;
}
.nvbr {
background-color: #3E7FE3;
}
.logoicon {
width: 60px;
height: 37px;
}Suggerimennti?
