Ciao a tutti. Non capisco perchè la massima altezza e larghezza di immagini che posso inserire nel mio sito affinche rimanesse responsive è, ho provato a caricare una seconda foto che però è molto grande; il risultato è che dallo smartphone si può notare che la foto sborda cancellando il container... il sito è questo https://hard-questions.com/articoli/...-tutorial.htmlcodice:height="330"width="280"
Ultima modifica di carlomarangoni; 02-02-2020 a 16:37
@PietroConta
Il tag CODE va scritto cone le parentesi quadre
Se metti misure fisse non sarà mai responsive ci vogliono misure in %
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Ciao, in HTML le misure le devi inserire fisse, così da far comprendere ai motori di ricerca la reale dimensione della foto.
La dimensione della foto invece la puoi impostare tramite CSS. Se desideri che l'immagine sia responsive, ecco il codice da inserire.
Esempio HTML:
codice:<img class="responsive" src="foto.jpg" width="400" height="200" alt="Testo alternativo">
Esempio CSS:
codice:img.responsive { height: auto; width: 100%; }
Con queste istruzioni, utilizzi l'immagine a pieno schermo, e l'altezza di adatterà automaticamente.
Facendo cosi i valori"width="400" height="200"" vengono sovrascritti dai valori del css giusto?
sbagliato: è proprio il contrario. i valori inline sovrascrivono i valori css.Originariamente inviata da cassano
non so perché davide abbia fatto quell'esempio.
credo che comunque pietro abbia risolto
Assolutamente no!!! Gli unici valori inline che sovrascrivono il CSS sono gli stili. Se avessi utilizzato style="height: 400px; width: 400px" allora sì, ci sarebbe stata una sovrascrittura e lo stile inline avrebbe sovrascritto il CSS esterno.
Quando si utilizzano i tag height e width, il CSS ha la priorità in quanto i tag definiscono la dimensione della foto, e il CSS ci aiuta a correggerli.
Ho fatto quell'esempio perché Pietro chiedeva in che modo poteva visualizzare correttamente un'immagine molto grande su smartphone senza "sbordare":
il risultato è che dallo smartphone si può notare che la foto sborda cancellando il container.
Ultima modifica di DavideMancuso; 20-02-2020 a 13:37
Per dimostrare quanto ho scritto ho creato la deguente demo: https://codepen.io/davidemancuso/pen/qBdaprP
hai ragione, nella fretta non ho distinto tra stile e attributo; cosa che andava fatta subito per non generare confusione.
Permessi di invio
Rispondi quotando