Visualizzazione dei risultati da 1 a 5 su 5

Hybrid View

  1. #1
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,780
    Ciao, potresti usare due elementi <img> sul codice html e impostarne, da css, la proprietà display come initial o none, rispettivamente per mostrare o nascondere una o l'altra immagine.

    Esempio:
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <style type="text/css">
          #img2{display:none}
          @media screen and (min-width:320px) and (max-width:479px){
            #img1{display:none}
            #img2{display:initial}
          }
        </style>
      </head>
      <body>
        <img id="img1" src="image1.jpg" alt="immagine 1">
        <img id="img2" src="image2.jpg" alt="immagine 2">
      </body>
    </html>

    PS: fai attenzione, sul tuo codice c'è un punto e virgola che non andrebbe messo, qui:
    codice:
    (max-width:479px;)
    Ultima modifica di KillerWorm; 21-02-2016 a 14:17
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  2. #2
    Utente di HTML.it
    Registrato dal
    Mar 2015
    Messaggi
    83
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, potresti usare due elementi <img> sul codice html e impostarne, da css, la proprietà display come initial o none, rispettivamente per mostrare o nascondere una o l'altra immagine.

    Esempio:
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <style type="text/css">
          #img2{display:none}
          @media screen and (min-width:320px) and (max-width:479px){
            #img1{display:none}
            #img2{display:initial}
          }
        </style>
      </head>
      <body>
        <img id="img1" src="image1.jpg" alt="immagine 1">
        <img id="img2" src="image2.jpg" alt="immagine 2">
      </body>
    </html>

    PS: fai attenzione, sul tuo codice c'è un punto e virgola che non andrebbe messo, qui:
    codice:
    (max-width:479px;)
    Ciao e Grazie per il tuo consiglio.

    Ho solo un problema,

    Se visualizzi il sito in modalità responsive
    sui vari tool sul web funziona perfettamente,

    Invece provandolo sullo smartphone (samsung galaxy s6 e galaxy s6 edge plus) con Chrome ed il browser predefinito visualizza la prima immagina adattata, è come se non prendesse la proprietà display none.

    Come posso risolvere?

    Grazie in anticipo

    link del sito: http://www.emanuelemarazzi.com/preview/fondazione

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2015
    Messaggi
    83
    Quote Originariamente inviata da bisco11 Visualizza il messaggio
    Ciao e Grazie per il tuo consiglio.

    Ho solo un problema,

    Se visualizzi il sito in modalità responsive
    sui vari tool sul web funziona perfettamente,

    Invece provandolo sullo smartphone (samsung galaxy s6 e galaxy s6 edge plus) con Chrome ed il browser predefinito visualizza la prima immagina adattata, è come se non prendesse la proprietà display none.

    Come posso risolvere?

    Grazie in anticipo

    link del sito: http://www.emanuelemarazzi.com/preview/fondazione
    Credo di aver capito

    la risoluzione di quei telefoni è 640x1136 quindi credo che devo prepararmi una foto con quella risoluzione

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