Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2019
    Messaggi
    3

    CSS Immagine "Non" Responsive..

    Salve a tutti, premetto di essere non molto bravo nel settore del CSS.
    Sto progettando un sito, il problema è che l'immagine principale della HomePage (banner.jpg), sul PC non si vede in modo corretto (la foto è tagliata a metà o circa 1/4) mentre sul dispositivo mobile si vede perfettamente grazie alla responsive.

    Allego il codice e screenshoot.

    CSS:
    CSS.PNG

    Su PC/Cellulare:
    https://imgur.com/a/PJSS3P0

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,602
    Ciao, l'immagine viene tagliata per effetto della proprietà background-size:cover e in base alle dimensioni (larghezza e altezza) del contenitore; questo è il normale comportamento. Il valore cover infatti fa in modo di riempire interamente l'ingombro del contenitore ridimensionando l'immagine (cioè in maniera che non restino parti vuote) e mantenendo comunque il rapporto delle dimensioni originali dell'immagine.

    Le dimensioni del contenitore prescindono da quelle originali dell'immagine, per cui sei "tu" a dover stabilire altezza e larghezza del contenitore. In questo caso la larghezza viene estesa per tutta la pagina mentre l'altezza, da quel che vedo, è impostata come auto, quindi si adatta in base all'ingombro del proprio contenuto.

    sul PC non si vede in modo corretto
    In questo caso è soggettivo; bisogna capire cosa intendi tu per "modo corretto".

    Una soluzione potrebbe essere quella di impostare un'altezza fissa, o con un valore minimo, per il contenitore, in modo che il soggetto dell'immagine risulti comunque sufficientemente visibile secondo le tue esigenze.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    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
    Registrato dal
    May 2019
    Messaggi
    3
    Hey,
    in pratica quello che voglio ottenere io è una Homepage come in foto (https://imgur.com/a/Bnveija).

    Ti chiedo inoltre perfavore di aiutarmi col codice , come ho già detto sono alle prime armi
    Ultima modifica di Frank22; 05-02-2020 a 23:00

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,602
    Una soluzione potrebbe essere quella di impostare un'altezza fissa, o con un valore minimo, per il contenitore, in modo che il soggetto dell'immagine risulti comunque sufficientemente visibile secondo le tue esigenze.
    Tradotto in codice css significa: sostituisci a quel height: auto; una cosa del tipo height: 900px;
    in modo da rendere fisso il valore dell'altezza.
    Oppure, se prevedi che quell'elemento possa avere dei contenuti che superano tale dimensione (per cui un'altezza fissa potrebbe dare problemi) lascia height: auto; e aggiungi una cosa del tipo min-height: 900px;.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    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
    Registrato dal
    May 2019
    Messaggi
    3
    Finalmente ho risolto con : height:auto e min-height: 92vh;
    Ti ringrazio moltissimo per l'aiuto

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