Adattamento e ridimensionamento con % in css-html

di il
6 risposte

Adattamento e ridimensionamento con % in css-html

In linea teorica sarebbe sufficiente indicare le % per ridimensionare gli elementi della pagina.

Tuttavia non capisco perché non esistono le variabili in HTML che semplificherebbero.

Forse però con HTML 5 son state aggiunte?

Devo aggiornarmi.

6 Risposte

  • Re: Adattamento e ridimensionamento con % in css-html

    10/08/2025 - dev-vico ha scritto:

    Tuttavia non capisco perché non esistono le variabili in HTML che semplificherebbero.

    Variabili per fare che cosa?
    Se parliamo di CSS, variabili esistono.

    Non è ben chiaro però qual è il problema specifico di cui si sta parlando.

  • Re: Adattamento e ridimensionamento con % in css-html

    Ciao @alka, grazie per l'intervento, hai ragione potevo essere più chiaro, mi spiego.

    Vorrei creare in css delle variabili  width e height per lo screen ad esempio.

    Nel mio caso mi occorrono per il div parent.

    Nel mio caso strutturo già i div interni e già centrati con una dimensione del 90 % rispetto al padre nel quale son contenuti.

    Ho notato però che le immagini interne ai div vanno pure ridimensionate.

    Qui potrebbe essere utile con delle variabili fare lo stesso. Ovvero centrare l'immagine internamente con ad esempio:

    img{

    /*per centrare IMG al centro*/

    left: parent-div.left+(5/100)*(parent-div.width);

    }

    img {

    width: parent-div.width*90/100;

    }

    In alcuni casi avrebbe senso fare così 

    Chiaramente qui l'immagine si sfalderebbe

    Il mio caso è però più articolato di così(altrimenti sarebbe risolvibile con tecniche normali, e forse lo è comunque)
    Io devo avere tre immagini centrate nel div parent(con una left e right uguali di qualche px) e con sotto per ciascuna un testo(<p>) con width lunga massimo quanto l'immagine (se non erro ogni img l' ho inserita dentro un div assieme al <p>). Quando l'utente ridimensiona lo schermo o usa un device con width corta le immagini si devono ridimensionare rispettando le proporzioni e rimanendo al centro del div parent con sotto i loro <p> nel posto giusto.

    In genere nel tag img, le proprietà width e height si riferiscono all'immagine, cio+ se scrivo width: 80% non è relativo al div-padre ma all' immagine, giustamente.

    Se però faccio un div padre che contiene l'immagine dovrei rendere automatico il ridimensionamento interno dell' immagine che potrebbe adattarsi perfettamente al div, ma che qualora questo  sia ridimensionato applichi il ridimensionamento anche al figlio(img).

    Tuttavia il div viene ridimensionato in modo non proporzionale e quindi alterando le proporzioni dell'immagine.

    Se potessi usare un if(quando scende sotto una soglia) e le variabili, penso che con una semplice proporzione potrei mantenere le proporzioni.

    Non ho mai usato le variabili CSS(a meno che tu intenda le id o le classi, per le quali non so come accedere alle proprietà sin a d'ora), se puoi indicarmi come usarle in un semplice esempio ti ringrazio, buona giornata.

  • Re: Adattamento e ridimensionamento con % in css-html

    11/08/2025 - dev-vico ha scritto:

    Non ho mai usato le variabili CSS(a meno che tu intenda le id o le classi, per le quali non so come accedere alle proprietà sin a d'ora), se puoi indicarmi come usarle in un semplice esempio ti ringrazio, buona giornata.

    Ti avevo linkato la documentazione nella mia risposta precedente.

    11/08/2025 - dev-vico ha scritto:

    Il mio caso è però più articolato di così(altrimenti sarebbe risolvibile con tecniche normali, e forse lo è comunque) [...]

    Fossi in te, darei un'occhiata al funzionamento del Flex Box Layout per la disposizione e il dimensionamento (in alcuni casi) degli elementi, poiché la soluzione che hai prospettato (con la formula complessa) e anche l'esigenza da implementare, mi sembrano siano affrontati in modo eccessivamente complicato, nel senso che non mi è mai capitato di avere necessità simili in 20 anni, riferendomi alla necessità di lavorare su percentuali così precise, visto che tutto il contesto è generalmente "responsive".

    Proverei a ragionarne anche con una qualunque AI, enunciando quello che vuoi ottenere e chiedendo quali sono gli strumenti a cui puoi fare capo e "sviluppando" uno scambio di battute domande/risposta, approfondendo i dubbi e arrivando alla creazione di un prototipo da studiare (assieme agli articoli indicati sopra).

  • Re: Adattamento e ridimensionamento con % in css-html

    Grazie per il link, in effetti chiedendo a ChatGPT mi sforna subito il codice, lo condivido qui se dovesse servire ad altri:

    <!DOCTYPE html>
    <html lang="it">
    <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Foto disposte in orizzontale e con adattamento al ridimensionamento</title>
    
     <style>
       .div_img {
     display: flex;
     justify-content: center; /* space-between; *//* o center / space-around / space-evenly */
     align-items: flex-start;
     flex-wrap: nowrap; /* non va a capo */
     gap: 20px;
    }
    .img_container {
     text-align: center;
     max-width: 100%; /* opzionale */
    }
    .img_container img {
     width: 100%; /* oppure fissa come 200px */
     max-width: 200px;
     height: auto;
     display: block;
     margin: 0 auto;
    }
    .img_container p {
     margin-top: 10px;
     font-size: 14px;
    }
     </style
    </head>
    <body>
    <div class="div_img">
     <div class="img_container">
       <img src="\img-edit\foto1-400x193.jpg" alt="Descrizione 1">
       <p>Descrizione immagine 1</p>
     </div>
     <div class="img_container">
       <img src="\img-edit\foto2-400x193.jpg" alt="Descrizione 2">
       <p>Descrizione immagine 2</p>
     </div>
     <div class="img_container">
       <img src="\img-edit\foto3-400x193.jpg" alt="Descrizione 3">
       <p>Descrizione immagine 3</p>
     </div>
    </div>
    <body>
    </html> 
  • Re: Adattamento e ridimensionamento con % in css-html

    12/08/2025 - dev-vico ha scritto:

    Grazie per il link, in effetti chiedendo a ChatGPT mi sforna subito il codice

    Fatti spiegare anche però il motivo per cui ha scritto il codice in quel modo, e verifica le informazioni che ti fornisce (riferimenti alla documentazione, spiegazioni, ecc.).

  • Re: Adattamento e ridimensionamento con % in css-html

    12/08/2025 - Alka ha scritto:

    12/08/2025 - dev-vico ha scritto:

    Grazie per il link, in effetti chiedendo a ChatGPT mi sforna subito il codice

    Fatti spiegare anche però il motivo per cui ha scritto il codice in quel modo, e verifica le informazioni che ti fornisce (riferimenti alla documentazione, spiegazioni, ecc.).

    D'accordo grazie 

Devi accedere o registrarti per scrivere nel forum
6 risposte