Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2011
    residenza
    bergamo
    Messaggi
    1,027

    [HTML5 CSS3] ridimensionamento immagini

    buonasera a tutti, sto cercando di sviluppare una pagina web in css3 e html5
    però trovo subito un ostacolo in quanto vorrei che delle immagini si ridimensionassero automaticamente in base al device con cui mi collego, ho notato che allo stato attuale se mi collego da smartphone non si ridimensiona nulla eppure ho utilizzato il viewport nel meta tag...
    come mai?
    la pagina a cui faccio riferimento è questa:
    www.francescopassanante.com/prova/index.php

    il codice dello style è il seguente:
    codice:
    #main{
    box-sizing:border-box;
    font-family:Verdana;
    font-size:14px;
    }
    #topdiv{
    display:flex;
    justify-content:space-around;
    background-color:#ff0000;
    }
    #forzasilvio{pagging:0 20px;margin:0px;}
    #titolo{padding:0 20px;margin:0px;}
    #forzaitalia{padding:0 20px;margin:0px;}
    mentre della pagina html è la seguente

    codice:
    <!doctype html>
    <head>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <div id="main">
    <div id="topdiv">
    <div id="forzasilvio"><img style="height:135px;width:150px;" src="img/forzasilvio.jpg" alt="Club Forza Silvio - Bergamo"></div>
    <div id="titolo"><h1>laura capella</h1></div>
    <div id="forzaitalia"><img style="height:135px;width:150px;" src="img/forzaitalia.jpg" alt="Forza Italia"></div>
    </div>
    </div>
    </body>
    </html>
    infine vorrei dire che non voto silvio berlusconi sto facendo solo un favore ad una amica che mi paga per fargli il sito della sua candidatura.. non sono nemmeno contento io di farglielo

  2. #2
    Utente di HTML.it
    Registrato dal
    May 2011
    residenza
    bergamo
    Messaggi
    1,027
    purtroppo ho cambiato i file e dovrete affidarvi il codice per aiutarmi a risolvere il problema perchè il sorgente online l'ho modificato...

  3. #3
    Tranquillo, qui ci interessa poco e niente per chi si vota (almeno in questa sezione )
    Per quanto riguarda il codice, hai provato a dare all'immagine una width in percentuale e una height: auto?

  4. #4
    Utente di HTML.it
    Registrato dal
    May 2011
    residenza
    bergamo
    Messaggi
    1,027
    ma le immagini se metto width 100% non si estendono fino a grandezza naturale? quindi se dovess fare come dici tu io dovrei modificare la loro grandezza originale e poi darle un width 100% ? e l'height auto va sulle immagini? oppure width100% e height auto li metto al div contenitore?

  5. #5
    Chi ha parlato di 100% Io ho detto solo in percentuale, che può essere width: 22% o quel che sia

  6. #6
    Utente di HTML.it
    Registrato dal
    Dec 2013
    residenza
    Ancona
    Messaggi
    6
    prova a mettere la regola::


    img {
    max-widht: 100%;
    height: auto;}

    se non ricordo male fa si che l'immagine sia al massimo larga quanto il contenitore che la contiene.

  7. #7
    C'è un errore

    Quote Originariamente inviata da LucaV88 Visualizza il messaggio
    img {
    max-width: 100%;
    height: auto;}

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.