Bootstrap 4 Card overlay non responsive

iTonto

Utente Attivo
8 Feb 2018
107
2
18
www.fiverr.com
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.

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?
 
Discussioni simili
Autore Titolo Forum Risposte Data
P Bootstrap navbar si richiude su mobile HTML e CSS 2
websilvia Contact form using Bootstrap 3.3.4 PHP 8
felino Radio button e Bootstrap: modificare il colore di default! HTML e CSS 1
F Come passare una variabile al modal di bootstrap PHP 1
motleyrulez Paginazione Tabella Bootstrap Javascript 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
felino [Bootstrap] Allineamento verticale HTML e CSS 1
MaryRoxenne Questione Bootstrap HTML e CSS 1
L Bootstrap 4 input ext value HTML e CSS 1
riminese77 [ASP.Net] Popup Bootstrap in datagrid ASP.NET 0
W [Javascript] Bootstrap Admin templates, mi dareste dei consigli? CMS (Content Management System) 0
fabiodisconzi Miglior template bootstrap 4 admin? CMS (Content Management System) 1
L Come sovrascrivere i parametri di Bootstrap CMS (Content Management System) 0
L Navbar dropdown con Bootstrap: link ai css CMS (Content Management System) 4
E Bootstrap con parallax e particles jQuery 2
paloppa Bootstrap.min.css modificare il file HTML e CSS 6
T [PHP] passare una variabile in una finestra MODAL di bootstrap PHP 3
M Responsive design bootstrap HTML e CSS 2
xone [Vendo] Landing Page in html css bootstrap responsive Compravendita siti e domini 0
F Bootstrap Notify jQuery 0
V Creare funzioni PHP per agevolare bootstrap PHP 1
V Passare a PHP pagina bootstrap creata in HTML PHP 1
A [Javascript] Problemi menu bootstrap Javascript 1
A Bootstrap grid img a sinistra serie di div a destra CMS (Content Management System) 1
T Bootstrap: allineamento sotto il BADGE HTML e CSS 1
O Bootstrap carousel-caption responsive CMS (Content Management System) 2
F img bootstrap centrata nello schermo HTML e CSS 1
F Slide down/up dropdown Bootstrap jQuery 0
otto9due Form personalizzato in bootstrap da integrare nel tema wordpress WordPress 0
L [HTML] bootstrap problema menu dropdown in mobile. HTML e CSS 3
L tabella bootstrap PHP 3
L Problema Bootstrap Modulo Email + php PHP 1
J Bootstrap dropdown menu non funziona con jquery-1.8.2??? jQuery 5
R Bootstrap Carousel allineamento a sinistra impossibile! HTML e CSS 1
MarcoGrazia Verifica della data inserita in un form ( utilizzando bootstrap ) Javascript 7
L slider bootstrap HTML e CSS 0
C Sottomenù Bootstrap che non funziona correttamente HTML e CSS 8
MarcoGrazia Problema con bootstrap, saltata tutta la paginazione in IE8 HTML e CSS 1
E problema con carousel di Bootstrap HTML e CSS 1
R Dubbi Incolonnamento Layout con Bootstrap. HTML e CSS 1
F 5 colonne con bootstrap 2 HTML e CSS 4
F Altezza immagini Bootstrap HTML e CSS 1
J Problema con form in bootstrap HTML e CSS 0
J Menu a tendina con bootstrap 3 HTML e CSS 3
C Form registrazione Bootstrap PHP 0
kungfujava Bootstrap e animazione caricamento pagina HTML e CSS 0
S Bootstrap e lightbox HTML e CSS 0
L ho un template Bootstrap, come lo personalizzo? HTML e CSS 1
W Centrare immagine con Bootstrap [era: Centrare div con bootstrap] HTML e CSS 2

Discussioni simili