Visualizzazione risultati 1 fino 3 di 3

Discussione: Slide boostrap immagini responsive

  1. #1
    lucafornaciarifotografie non è connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    128

    Predefinito Slide boostrap immagini responsive

    Codice:
          
    <img class="d-block w-100" 
    srcset="https://lucafornaciarifotografie.altervista.org/wp-content/uploads/2021/01/slide03-960x540.jpg 960w,
          https://lucafornaciarifotografie.altervista.org/wp-content/uploads/2021/01/slide03-320x180.jpg 320w,
          https://lucafornaciarifotografie.altervista.org/wp-content/uploads/2021/01/slide03-768x432.jpg 768w,
          https://lucafornaciarifotografie.altervista.org/wp-content/uploads/2021/01/slide03.jpg 1920w" 
          sizes="(max-width: 960px) 100vw, 1920px" 
    src="https://lucafornaciarifotografie.altervista.org/wp-content/uploads/2021/01/slide03.jpg" alt="Second slide">
    Scusate ho un problema, con una slide con boostrap 4.
    Vorrei caricare immagine delle giuste dimensioni quando lo schermo diventa più piccolo.

    Con il Network di chrome ho visto che se cambio le dimensioni della finestra funziona tutto, ma se attivo il simulatore responsive non carica mai sotto 960. Ho fatto anche un tentativo con lo smartphone e mi fa scaricare l'immagine da 960px.
    Dove sbaglio? Il codice a me sembra corretto.

  2. #2
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    4,285

    Predefinito

    Salve,
    provi sostituendo max-width con min-width.

    Cordialali saluti.

  3. #3
    lucafornaciarifotografie non è connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    128

    Predefinito

    Non ho risolto, ho seguito anche questa guida: https://decaro.la/2016/08/29/immagin...ive-2-4-srcset
    quindi ho riscritto il codice senza l'attributo size, che effettivamente era inutile.
    Adesso mi prende solo due immagini, mentre mi salta la terza. Dimenticavo che si tratta di html inserito nel blocco html di gutenberg dentro una pagina in wordpress.

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •