Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Inserire immagini responsive

    Ciao a tutti. Non capisco perchè la massima altezza e larghezza di immagini che posso inserire nel mio sito affinche rimanesse responsive è
    codice:
    height="330"width="280"
    , 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.html

    Ultima modifica di carlomarangoni; 02-02-2020 a 16:37

  2. #2
    @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

  3. #3
    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.

  4. #4
    Utente di HTML.it L'avatar di cassano
    Registrato dal
    Aug 2004
    Messaggi
    2,969
    Facendo cosi i valori"width="400" height="200"" vengono sovrascritti dai valori del css giusto?

  5. #5
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,703
    Quote Originariamente inviata da cassano Visualizza il messaggio
    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.
    non so perché davide abbia fatto quell'esempio.

    credo che comunque pietro abbia risolto

  6. #6
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    sbagliato: è proprio il contrario. i valori inline sovrascrivono i valori css.
    non so perché davide abbia fatto quell'esempio.
    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

  7. #7
    Per dimostrare quanto ho scritto ho creato la deguente demo: https://codepen.io/davidemancuso/pen/qBdaprP

  8. #8
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,703
    hai ragione , nella fretta non ho distinto tra stile e attributo; cosa che andava fatta subito per non generare confusione.


Tag per questa discussione

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.