immagine non responsive

controsenso

Utente Attivo
26 Nov 2014
36
1
0
Ciao a tutti , ho creato una semplice pagina html per provare a renderla responsive senza utilizzare i framework come Bootstrap.

Questo è il codice
HTML:
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <link rel="stylesheet" href="type.css" type="text/css">
    </head>
    <body>
 <div id="contenitore">
     <header>   <nav><a href="home.html">Home</a> | <a href="chisiamo.html">Chi siamo</a> | <a href="dovesiamo.html">Dove siamo</a></nav>  </header>

     <section id="corpo">
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? </p>
     <div class="gallery"><img src="img/im.jpg"> </div>

     </section>
     <footer></footer>
     </div>
        
       
    </body>
</html>

E il css
HTML:
body
{
    font:100%;
    
    color: white;
}

p{
  font-size:1em;   
  
}


#contenitore {
max-width: 60em;/*    larghezza layout960px / dimensione font16px  = 60em     */
margin: 0 auto;
}

header,nav,corpo,footer,gallery {
border-box:100%;
}

header
{
    background:grey;
    height: 80px;
  
}

nav
{
   float:right;
   margin: 1.2em;
    background:pink;
    height:30px;
}

#corpo
{
    background:black;
    height:700px;
}
footer
{
    background:grey;
    height:40px;
    
}

.gallery{
max-width:100%;

}

Se rimpicciolisco la finestra del browser l'immagine esce fuori dal div e non si adatta alla dimensione della finestra.Perchè?
Per rendere questa pagina responsive devo inserire qualche altra regola css?
Grazie!
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Una pagina responsive non si riduto solo a questo ma se dai una misura in larghezza all'immagine in % vedrai che funziona
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
La larghezza in % la devi dare al tag <img ...... >
 

controsenso

Utente Attivo
26 Nov 2014
36
1
0
funziona anche se non capisco perchè riducendo la finestra del browser l'immagine non rimane all'interno della section..
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Guarda io ho copiato pari pari il tuo codice senza cambiare una virgola ho solo fatto questa variazione
Codice:
<img src="img/im.jpg"[B][COLOR="#FF0000"] width="100%"[/COLOR][/B]>
e a me non va fuori e si adatta bene ridimensionando la finestra del browser.

Se tu invece hai il problema bisogna che ci posti un link per vedere la pagina altrimenti non capiamo dove sta il problema
 
Discussioni simili
Autore Titolo Forum Risposte Data
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
Morganot37 Photoshop CC non può aprire l'immagine Webdesign e Grafica 5
C [PHP] Upload immagine in un form con target _blank: non funziona PHP 7
Shyson Non trova immagine Captcha PHP 4
Shyson Input non richiama immagine HTML e CSS 5
Shyson Immagine non viene richiamata Javascript 2
filippino Quando condivido l'articolo su facebook NON esce l'immagine Social Media Marketing 1
steak [RISOLTO] Immagini come link e immagine non cliccabile HTML e CSS 16
G Con Photoshop come faccio a ritagliare un immagine irregolare e quindi non vedere più la parte ester Photoshop 3
P Immagine Sfondo body non completa HTML e CSS 6
helpdesk Problema Upload non ridimensiona l'immagine PHP 4
S Diminuire il peso di una immagine ma non la forma Photoshop 3
I onclick non cambia l'immagine invece onmouseOver e Out si Javascript 9
S Problema assegnazione immagine [era: Problema che non riesco davvero a risolvere :(] PHP 1
SolidSnake4 ezImage non visualizza l'immagine PHP 0
matteoraggi Immagine .jpg che non si vede solo su internet explorer HTML e CSS 2
B l'immagine non si visualizza nell'e-mail PHP 1
U onclick immagine random con testo non random Javascript 20
N Non riesco a centrare l'immagine di sfondo Webdesign e Grafica 9
P Inserire logo su un immagine ma NON TEMPORANEO PHP 1
H Immagine di sfondo a tabella: centrata e non affiancata Webdesign e Grafica 6
I Visualizzazione immagine non corretta. Webdesign e Grafica 1
S Usare onmouseover con 'campo immagine' e non al tag <img> Javascript 3
I Immagine in sfondo di una classe che non compare. HTML e CSS 2
rok link ad un immagine. non funziona... HTML e CSS 2
R upload e ridimensionamento immagine non funzionante PHP 0
metalgemini Problema: non mi trova immagine x background HTML e CSS 8
M Upload immagine con javascript problemi con FormData() Javascript 1
M Visulizzare immagine con php PHP 8
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 6
L Come caricare un'immagine in Canvas dinamicamente Javascript 0
L salvare una immagine elaborata in canvas Javascript 1
L salvare una immagine elaborata in canvas Javascript 1
Y Come caricare e visualizzare un'immagine PHP 0
S Testo scrolla su immagine che cambia HTML e CSS 0
M Quando ha l'immagine ingrandita è possibile fare rotazione per ritagliare? Photoshop 0
R Caricamento immagine su cartella remota + mysql PHP 3
L Upload di un'immagine all'interno di un database usando php PHP 6
G Modifica immagine di sfondo attraverso un bottone PHP 18
F photoshop portable : spostamento immagine Photoshop 0
A Server Apache immagine not found (ERROR 404) Apache 5
P [Photoshop] ritagliare una immagine Photoshop 1
S [PHP] Recupero nome immagine da Form con input file PHP 3
D [Javascript] salvare immagine canvas - paypal Javascript 0
D [HTML] Inviare un link contenente un' immagine HTML e CSS 4
M [PHP] Cercare l'ultima immagine caricata in una cartella datata PHP 15
C [Photoshop] bordi tondi come posso fare per ottenerli come nell'immagine allegata Photoshop 2
M [HTML] Tasto condivisione social e immagine HTML e CSS 2
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2

Discussioni simili