Visualizzazione dei risultati da 1 a 6 su 6

Hybrid View

  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    790

    stesso CSS ma l'immagine riempie il container solo in un caso

    Ho il layout del mio blog impostato in un modo, con l'immagine max-width:100%;height:auto; in modo da riempire il div, ma sembra che in un'altra categoria l'immagine non recepisca il CSS, e non si mette in cover. Potrei centrarla con margin:auto;display:block; per migliorare il layout ma vorrei che riempisse il suo spazio. Evidentemente qualche proprietà è errata. Chiedo gentilmente se con l'inspector qualcuno può scoprire il problema. Grazie

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    Con max-width non è detto che la larghezza si porti al 100%; questo dipende dalla larghezza originale dell'immagine o da quella impostata con width.

    Nel tag img vedo che è impostato l'attributo width, con cui è fissata la larghezza nominale dell'immagine; nel primo caso ha un valore superiore alla larghezza del contenitore, per tale motivo il max-width fa il suo dovere limitando la larghezza dell'immagine a quella del contenitore. Nel secondo caso invece l'attributo width è impostato a 258 (pixel), valore che è inferiore alla larghezza del relativo contenitore; ma anche in questo caso il max-width fa il suo dovere lasciando invariata tale larghezza proprio perché non supera il 100% della larghezza disponibile del contenitore.

    Per risolvere puoi aumentare il valore di quell'attributo width su quei tag img, in modo che sia uguale o superiore alla larghezza del suo contenitore; oppure puoi usare la proprietà width, nel CSS, al posto di max-width, in modo da avere sempre una larghezza fissata al 100% del contenitore.
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    790
    si, immaginavo che il problema fosse dovuto alla reale misura delle immagini, che infatti nel secondo caso è 258px. Quindi max-width va esclusa a priori perchè calcola 100% dell'immagine mentre a me occorre 100% del container. Ma ho provato con object-fit e background-size, senza successo. Ed invece, usando semplicemente width:100% (invecedi max-width) mi risolve il problema delle piccole, ma crea grandi casini per quelle grandi perchè evidentemente si prende la classe img di tutto il sito.
    Non riesco a dividere le due cose... eppure sono frutto dello stesso CSS.

    UPDATE... forse ci sono riuscito... certo, le piccole perdono un po' di risoluzione ovviamente
    Ultima modifica di stardom; 28-12-2021 a 00:00

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    Quindi max-width va esclusa a priori perchè calcola 100% dell'immagine
    No, probabilmente non sono stato chiaro, il valore percentuale è riferito sempre al contenitore, sia per max-width sia per width. La proprietà max-width però consiste nel fatto di limitare la larghezza (width) se il suo valore supera quello impostato (nel tuo caso il 100% del contenitore).

    usando semplicemente width:100% (invecedi max-width) mi risolve il problema delle piccole, ma crea grandi casini per quelle grandi perchè evidentemente si prende la classe img di tutto il sito.
    Cerca di non fare confusione, il selettore img non è un selettore di "classe" ma di "tipo" (e ti rinvito a studiarti qualche guida di base riguardo i selettori).

    Se stai usando questa regola:
    codice:
    img {
        width: 100%;
        height: auto;
    }
    sarà applicata indistintamente a tutti gli elementi <img>.

    E' chiaro che in questo caso stai usando un selettore troppo generico; è opportuno magari costruire un selettore più specifico in modo da "identificare" solo le immagini a cui vuoi applicare tali proprietà.



    PS:
    Ti direi esattamente cosa fare ma non è mio interesse dare ogni volta la minestra pronta. Se poi qualcun altro vuole farlo, ben venga.

    Personalmente preferisco invece che tu riesca ad arrivarci da solo, anche in base a ciò che ho indicato. Ti invito perciò a studiare e ragionarci sopra per arrivare ad una possibile soluzione, dal momento che si tratta comunque di nozioni di base; diversamente torneresti ad inciampare sempre sugli stessi problemi senza mai capire come risolvere.

    Buone Feste
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    790
    ..mi conosci, mescolo le cose, ma del resto non è il mestiere... non mi aspetto minestre pronte, anzi, le tue dritte sono sempre utili ad uscire dai miei vicoli ciechi.
    Ora ho sistemato velocemente, poi prima della fine delle "feste" arriverò ad una solutione ad hoc. Grazie e buon anno a te, Killer!

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    ma del resto non è il mestiere
    Capisco e concordo. Certo, non dico che bisogna conoscere la materia a livello professionale - ad ognuno il suo - ma vedo che spesso ti trovi a "perdere tempo" nel cercare di aggiustare problemi che generalmente nascono da una carenza di nozioni basilari, per cui mi chiedo se non sarebbe meglio per te investire quel tempo per acquisire meglio certe nozioni così che tu stesso riesca ad affrontare e risolvere questo tipo di problemi quando ti si ripresentano.

    Hint:
    Una possibile soluzione al problema in oggetto è piuttosto semplice. Dal momento che le immagini in questione hanno una specifica classe in comune tra loro (non applicata al resto delle immagini nel sito, da quel che posso vedere) potresti utilizzare questa come selettore per costruire e aggiungere una nuova regola specifica che sarà appunto applicata solo a quelle immagini. In questa regola ti basterà impostare la proprietà "width: 100%;"


    Ora ho sistemato velocemente, poi prima della fine delle "feste" arriverò ad una solutione ad hoc. Grazie e buon anno a te, Killer!
    Bene, buon fine anno e un sereno 2022
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.