CSS Immagine "Non" Responsive..

[Frank22]

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

[KillerWorm]

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.

[Frank22]

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

[KillerWorm]

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;.

[Frank22]

Finalmente ho risolto con : height:auto e min-height: 92vh;
Ti ringrazio moltissimo per l'aiuto