Allineamento immagini centrate e senza spazi tra loro

nicolass2005 · 04-07-2024, 18:33

Buongiorno a tutti.
Sto realizzando una pagina web per una modella, sono all'inizio del lavoro e mi sto concentrando sulla disposizione delle immagini all'interno di ogni singola riga. Attualmente la riga è una sola e unica.
In sostanza, le direttive di formattazione per ogni singola riga sono le seguenti:
sugli schermi più piccoli ci devono essere due immagini per riga e le foto possono essere ridotte per adattarsi a questa impaginazione; negli schermi da 800 px in su ci sono 4 immagini per riga e le immagini non devono essere ingrandite in nessun caso ma rimanere a dimensione fissa di 200 x 150.
Tutto bene negli schermi fino a 800 o poco più, mentre per le risoluzioni più alte le foto presentano spazio tra di loro e non riesco a centrarle.
Vorrei che le 4 foto siano sempre centrate al centro dello schermo e non presentino spazio tra loro, e lo spazio in eccesso eventualmente sia distribuito solo nel margine destro e sinistro della pagina web.
Inserisco qui sotto il codice HTML.
Allego screenshot della visualizzazione alla risoluzione di 1280x800.
Allego screenshot della visualizzazione alla risoluzione di 1280x800 che vorrei ottenere.

Ho fatto tantissime prove e provato a centrare il contenitore .row e il .img-thumbnail ma il risultato è sempre il medesimo. Sono certo che per qualcuno di voi sarà un lavoro semplicissimo... qualcuno che mi indichi cosa devo cambiare e il motivo! Grazie

Codice HTML:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titolo title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        .container-fluid {
            margin-top: 20px;
            padding: 0;
        }
        .img-thumbnail {
            width: 100%; /* Larghezza massima */
            max-width: 100%; /* Larghezza massima al 100% del contenitore */
            height: auto; /* Altezza automatica per mantenere le proporzioni */
            margin-bottom: 0; /* Rimuove lo spazio inferiore tra le immagini */
            border: none; /* Rimuove il bordo */
            padding: 0; /* Rimuove il padding interno */
            display: block; /* Imposta l'immagine come elemento blocco */
            margin: 0; /* Rimuove eventuali margini */
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        .description {
            margin-bottom: 20px;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
            display: flex;
            justify-content: center;
            background-color: #f8f9fa;
            margin-bottom: 20px;
        }
        nav ul li {
            margin: 0 15px;
        }
        nav ul li a {
            text-decoration: none;
            color: #007bff;
        }
        .row {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0; /* Rimuove lo spazio tra le immagini */
        }
        .col-lg-3, .col-md-6 {
            padding-left: 0;
            padding-right: 0;
            margin-bottom: 0;
        }
        @media (max-width: 400px) {
            .col-md-6 {
                flex: 0 0 50%; /* Due immagini per riga */
                max-width: 50%;
            }
            .img-thumbnail {
                width: 100%; /* Ridimensiona le immagini per adattarsi */
                max-width: 100%;
            }
        }
        @media (min-width: 401px) and (max-width: 500px) {
            .col-md-6 {
                flex: 0 0 50%; /* Due immagini per riga */
                max-width: 50%;
            }
            .img-thumbnail {
                width: 100%; /* Ridimensiona le immagini per adattarsi */
                max-width: 100%;
            }
            .row {
                margin-left: 0; /* Rimuove margine sinistro */
                margin-right: 0; /* Rimuove margine destro */
                justify-content: space-between; /* Spazio tra la prima e l'ultima immagine */
            }
        }
        @media (min-width: 501px) and (max-width: 597px) {
            .col-lg-3 {
                flex: 0 0 25%; /* Quattro immagini per riga */
                max-width: 25%;
            }
            .img-thumbnail {
                width: 100%; /* Ridimensiona le immagini per adattarsi */
                max-width: 100%;
            }
        }
        @media (min-width: 598px) and (max-width: 799px) {
            .col-lg-3 {
                flex: 0 0 25%; /* Quattro immagini per riga */
                max-width: 25%;
            }
            .img-thumbnail {
                width: 100%; /* Ridimensiona le immagini per adattarsi */
                max-width: 100%;
            }
        }
        @media (min-width: 800px) {
            .col-lg-3 {
                flex: 0 0 25%; /* Quattro immagini per riga */
                max-width: 25%;
            }
            .img-thumbnail {
                width: 200px; /* Dimensioni fisse */
                height: 150px; /* Dimensioni fisse */
                object-fit: cover; /* Per mantenere le proporzioni */
            }
            .row {
                justify-content: center; /* Centra le immagini */
                gap: 0; /* Rimuove lo spazio tra le immagini */
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="header">
            <img src="logo.png" alt="Logo del sito" class="img-fluid">
            <h1 class="description">Descrizio titolo H1</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Galleria</a></li>
                <li><a href="#">Contatti</a></li>
                <li><a href="#">Chi siamo</a></li>
            </ul>
        </nav>
        <div class="row">
            <!-- Loop per generare le miniature delle immagini -->
            <div class="col-lg-3 col-md-6">
                <img src="1.jpg" alt="Modella 1" class="img-thumbnail">
            </div>
            <div class="col-lg-3 col-md-6">
                <img src="2.jpg" alt="Modella 2" class="img-thumbnail">
            </div>
            <div class="col-lg-3 col-md-6">
                <img src="3.jpg" alt="Modella 3" class="img-thumbnail">
            </div>
            <div class="col-lg-3 col-md-6">
                <img src="4.jpg" alt="Modella 4" class="img-thumbnail">
            </div>
            <!-- Ripetere il blocco precedente per tutte le immagini -->
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

nicolass2005 · 04-07-2024, 18:41

Eccola.....

Strumenti
Mostra una versione stampabile Invia questa pagina per email