Adattare a schermo 2 immagini e renderle responsive

**gigig84** · 13-03-2014, 20:25

Ciao a tutti, ho un prolema che non sto riuscendo a risolvere, e non capisco con che chiavi cercare
Praticamente devo creare una pagina che prenda tutto lo schermo con 2 immagini.
Ho fatto 2 immagini grandi 1920px di larghetta in totale per adattarle anche a monitor grandi, vorrei che comparissero sulla stessa riga, ma che si adattassero in base alla randezza della finestra del browser, con i semplici float, e max-width le foto rimangono della stessa grandezza,ho provato con questo codice:

codice:

<div style="width:99%">
    <div style="width:49%;float:left;height: auto; max-width:49%;">
            <img src="homepage-accese_01.jpg" width="auto" height="auto" alt="immagine1 ">
           
    </div>
    <div style="width:49%;float:right;height: auto;max-width:49%;">
            <img src="homepage-accese_02.jpg" width="auto" height="auto alt="immagine2">
     </div>
</div>

speravo funzionasse, ma non è così

Qualcuno di voi può aiutarmi a capire il perchè?

**Prill** · 13-03-2014, 21:15

puoi semplificare riducendolo il codice html (porto fuori le dichiarazioni di stile in linea):

codice HTML:

...
<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
}
#imageContainer {
    width:99%;
    margin:0 auto;
}
#container img {
    display:block;
    float:left;
    width:49%;
    height:auto
}
img#right {
    float:right;
}
-->
</style>
</head>

<body>
<div id="imageContainer">
 <img src="homepage-accese_01.jpg" alt="immagine1">
 <img src="homepage-accese_02.jpg" id="right" alt="immagine2">
</div>

conviene azzerare imargini e i padding (l'ho fatto con la prima regola su tutti gli elementi)

**Prill** · 13-03-2014, 21:42

errata corrige: nel css non "#container img" ma "#imageContainer img"

**gigig84** · 13-03-2014, 21:46

Ti ringrazio tanto per l'aiuto, il tuo codice mi ha fatto venire in mente un paio di modifiche per ottenere un effetto fit perfetto ai 4 lati del browser, si distorce l'immagine, ma alla fine l'importante era l'effetto, ecco il codice odificato, e grazie ancora!

codice:

<!--
* {
    margin:0;
    padding:0;
}
#imageContainer {
    width:99%;
    margin:0 auto;
}
img {
    display:block;
    float:left;
    width:50%;
    height:99%;
}
img#right {
  /*  float:right;*/
}
-->
</style>
</head>

<body>
<div id="imageContainer">
 <img src="homepage-accese_01.jpg" alt="immagine1">
 <img src="homepage-accese_02.jpg" id="right" alt="immagine2">
</div>

Discussione: Adattare a schermo 2 immagini e renderle responsive

Strumenti discussione

Ricerca discussione

Visualizza

Adattare a schermo 2 immagini e renderle responsive

Permessi di invio