Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2011
    Messaggi
    420

    foto esce fuori dal body su dispositivi android

    Ciao a tutti!
    Non so se il problema è dovuto realmente ai dispositivi android ma per il momento visualizzo l'errore solo li, mentre al pc su ff, ie e chrome non ho nessun difetto...
    Il codice, molto semplice, è questo:

    Codice PHP:
    <style type="text/css">

    #header{height:70px;}

    #corpo{height:530px;}

    #main{
     
    width:1100px;
     
    height:430px;
     
    margin:auto;
    }
    </
    style>
    </
    head>

    <
    body>

    <
    div id="header">
       <
    div id="logo"><img src="img/logo3.png" /></div>
    </
    div>

    <
    div id="corpo">
        <
    div id="main"><img src="img/sx1.png" /></div>
    </
    div>
    </
    body
    L'immagine che ho nel corpo-main è esattamente 1100px per 430px e su dispositivi android fuoriesce dal main sul lato destro (allungando di fatto il sito), esattamente di 250px;
    Ho provato a ridurre l'ampiezza della foto man mano e il difetto sparisce con larghezza della foto inferiore o uguale a 950px.... in pratica è come se il div main che contiene la foto, avesse come ampiezza massima 950px invece che 1100...
    Se serve, la pagina è visualizzabile qui: http://www.medprova.altervista.org/gioel/home.html
    Ho provato qualche accorgimento banale ma senza risultati... sicuramente c'è qualche errore concettuale ma non saprei dove sbattere la testa!
    Grazie a tutti
    - "Si sono vegetariano. Diciamo che non mangio nulla che abbia un cuore"
    - "E i carciofi?"

  2. #2
    Utente di HTML.it L'avatar di Experiment8
    Registrato dal
    Jun 2012
    residenza
    Milano
    Messaggi
    254
    Ciao,

    Il fatto è che se la larghezza è 1100 pixel e il device (non credo che cambi su dispositivi non Android) non ha una finestra così grande, è normale che l'immagine sia piu' grande e quindi "sbordi" lateralmente.

    Per rimediare puoi rendere l'immagine responsive, prima di tutto sostituisci nella regola CSS #main la "width" con "max-width", e poi nello stile aggiungi la regola:

    codice:
    #main > img {
        max-width: 100%;
        height: auto;
    }
    In modo che l'immagine si adatti alla larghezza del contenitore.

    In un mondo di smartphone colui che possiede un PC è un re

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2011
    Messaggi
    420
    Perfetto! Grazie 1000!
    Ne approfitto per chiederti un paio di informazioni su questa modifica! Onestamente l'avevo pensato che poteva essere un limite del dispositivo (anche perché poi mi ero accorto che lo stesso errore si presentava anche sui mini pc) ma siccome tutto il sito compariva comunque in un'unica schermata ho pensato che lo spazio comunque c'era ma fosse sfruttato in maniera errata... come mai non compariva la barra di scorrimento orizzontale se il contenuto era superiore alla finestra del device?
    Per quanto riguarda la modifica che mi hai suggerito, cos'è che succede alla foto esattamente, viene ridotta? cioè se potessi misurare la larghezza in pixel della foto visualizzata su cellulare, riscontrerei una misura inferiore a 1100px?
    Grazie ancora
    - "Si sono vegetariano. Diciamo che non mangio nulla che abbia un cuore"
    - "E i carciofi?"

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