Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2002
    Messaggi
    536

    Problemi con dimensione immagine e CSS

    Ciao,

    Sto provando un template responsive gratuito, ma sto avendo problemi ad adattare un'immagine della home page alla stessa dimensione di quella originale che vorrei sostituire con la mia.

    La home page originale è questa:

    https://i.imgur.com/69BhZ68.png

    Da Photoshop le dimensioni dell'immagine sembrano essere queste:

    1920px X 943px risoluzione 72 pixel/inch


    La vorrei sostituire con la mia da:

    2048px X 1365px risoluzione 72 pixel/inch

    La ritaglio con la taglierina alle stesse dimensione dell'originale esporto in jpg e gli assegno lo stesso nome:

    https://i.imgur.com/0aG0uFL.png



    ma mi ritrovo come risultato finale sempre questo o qualcosa di simile:

    https://i.imgur.com/AYcXWQV.jpg

    In pratica sempre tagliata.

    Il ccs che gesisce la sezione è questo:

    codice:
    /* Header Section */
    .intro {
        display: table;
        width: 100%;
        padding: 0;
        text-align: center;
        color: #333;
        background: url(../img/intro-bg.jpg) no-repeat center top;
        background-color: #e5e5e5;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    Potete aiutarmi a capire quale sia il problema e cosa sbaglio?

    Grazie

  2. #2
    Più che sulle dimensioni dell'immagine originale, dovresti basarti sulle dimensioni del box che ha l'immagine come background.
    La regola background-size è impostata su "cover" che, nella maggior parte dei casi, è l'opzione migliore. Qui trovi delle alternative che forse si adattano meglio alle tue esigenze specifiche:
    https://www.w3schools.com/cssref/css...round-size.asp
    In particolare, testa l'opzione "contain".

    Un altro possibile escamotage potrebbe essere:
    background-position: bottom left;
    oppure
    background-position: center center;

    Per maggiori info:
    https://www.w3schools.com/cssref/pr_...d-position.asp

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2002
    Messaggi
    536
    Quote Originariamente inviata da lucavizzi Visualizza il messaggio
    Più che sulle dimensioni dell'immagine originale, dovresti basarti sulle dimensioni del box che ha l'immagine come background.
    La regola background-size è impostata su "cover" che, nella maggior parte dei casi, è l'opzione migliore. Qui trovi delle alternative che forse si adattano meglio alle tue esigenze specifiche:
    https://www.w3schools.com/cssref/css...round-size.asp
    In particolare, testa l'opzione "contain".

    Un altro possibile escamotage potrebbe essere:
    background-position: bottom left;
    oppure
    background-position: center center;

    Per maggiori info:
    https://www.w3schools.com/cssref/pr_...d-position.asp
    In effetti spippellando un po' con le opzioni proposte da queste pagine sopra riesco a migliorare la visualizzazione, soprattutto agendo sulle dimensioni in pixel.
    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 © 2024 vBulletin Solutions, Inc. All rights reserved.