Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it L'avatar di Tana
    Registrato dal
    Feb 2004
    residenza
    Reggio Calabria
    Messaggi
    128

    Evtare la divisione delle immagini in versone stampabile

    Sarebbe utile che i CSS integrassero una versione "stampabile", così come regolarmente previsto dal formato.
    Tutto funziona eccetto per il fatto che le immagini vengono tagliate se capitano nell'interruzione della pagina. Allego il codice del CSS attuale.

    codice:
    @media print {
    nav { position:relative; display:block; }
    body, nav, footer { background-color:#fff; color:#000; }
    img {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    }
    }
    Dove sto sbagliando?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,370
    Tali proprietà sono applicate ad elementi block. Per risolvere dovrebbe essere sufficiente applicare display:block ad img.

    Vedi qui:
    https://stackoverflow.com/questions/...n-a-page-break
    https://stackoverflow.com/questions/...g-on-image-tag
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it L'avatar di Tana
    Registrato dal
    Feb 2004
    residenza
    Reggio Calabria
    Messaggi
    128
    Grazie del tuo messaggio,
    In effetti avevo già trovato quei link ma non il problema continua... Naturalmente si aggira se aggiungo "page-break-before: auto;" ma questo vuol dire avere una nuova pagina per ogni immagine e non è molto conveniente...
    Aggiungo il CSS attuale delle img se può aiutare...

    codice:
    img {
    display: block;
    border-radius: 5px;
    border:1px solid #231f20;
    margin:auto;
    margin-top:40px;
    margin-bottom:40px;
    page-break-before: auto;
    page-break-after: auto;
    page-break-inside: avoid;
    break-inside: avoid;
    }

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,370
    Teoricamente dovrebbe bastare questo:
    codice:
    @media print {
        img {
            display: block;
            page-break-inside: avoid;
        }
    }
    quindi le immagini non dovrebbero mai risultare tagliate ma dovrebbero portarsi nella pagina successiva quando necessario.

    Purtroppo noto però che non tutti i browser si comportano allo stesso modo, quantomeno nell'anteprima di stampa. Testando su CH74 funziona perfettamente, mentre ad esempio su FF66 vedo comunque le immagini tagliate.



    Personalmente non saprei cos'altro consigliarti.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it L'avatar di Tana
    Registrato dal
    Feb 2004
    residenza
    Reggio Calabria
    Messaggi
    128
    Sì su Chromium funziona invece Firefox le taglia... Mah! Sarà una questione di browser...
    Sei stato gentilissimo, grazie!

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 © 2019 vBulletin Solutions, Inc. All rights reserved.