Ritagliare e centrare una immagine

**Hartman** · 12-02-2016, 13:56

Ciao a tutti

Per semplificare, ho due div affiancati (div 1 e div 2) contenuti in un terzo div grande quanto lo schermo.
Div 1, posto a sinistra, ha una dimensione fissa di 500px. Ora ho bisogno di inserire una immagine nel div 2, la cui altezza sarà alta tanto quanto lo schermo mentre la larghezza dovrà essere la larghezza del div contenitore (non definita ma variabile) meno i 500px del div a sinistra. L'immagine dovrebbe quindi scalare perchè non venga tagliata nell'altezza e invece dovrà tagliarsi ai lati e allinearsi al centro.
è possibile? siete in grado di aiutarmi? Grazie

**Mich_** · 15-02-2016, 18:21

Credo che convenga inizare con un minimo di codice:

codice:

HTML:
<html>
....
<body>
  <div id="tutto"> <!-- potrebbe anche non servire, dipende se c'e` altro nel body -->
    <div id="div1">
      ...
    </div>
    <div id="div2">
      <img src="..." alt="..." />
    </div>
  </div>
</body>
</html>

codice:

 CSS:
html, body {            /* necessari per poter usare le % all'interno */
  width: 100%;
  height: 100%;
}
#tutto {
  width: 100%;         /* copre tutto lo spazio del body */
  height: 100%;
  background: red;    /* come vuoi, ma per le prove servono gli sfondi diversi */
  min-width: 600px;   /* altrimenti la cosa non sta in piedi */
}
#div1 {
  width: 500px;
  height: 100%;       /* credo che intendessi cosi` */
  float: left;
  background: green;
}
#div2 {
  margin-left: 500px;
  height: 100%;
  background: blue;
}
#div2 img {
  height: 100%;      /* questo distorce l'immagine */
  width: 100%;
}

non so se ho interpretato tutto quanto chiedevi

**EliBelTI** · 16-02-2016, 19:33

ciao, ti riporto la mia versione

codice HTML:

<html>
     <head>
            <style type="text/css">
                   #tutto { height:100%; }
                   #div1 { width:500px; height:100%; background-color:yellow;float:left; }
                   #div2 {
                         width:calc(100% - 500px);
                         height:100%;        
                         float:left;    
                         background-image: url("img.jpg");       
                         background-position: center;        
                   }       
             </style>   
    </head>   
    <body>    
         <div id="tutto">   
               <div id="div1"></div>  
               <div id="div2"></div>  
         </div>    
    </body>
</html>

**Mich_** · 17-02-2016, 09:43

Nel tuo codice #tutto non e` largo il 100%. Cioe` e` il 100% di una quantita` non definita, per cui viene ignorato.
Affinche` il 100% abbia senso devi definire una larghezza nel body (e se il body ha width:100% ricorsivamente nell'HTML).

Per le dimensioni verticali la cosa e` simile, ma non esattamente uguale.

Nota che il valore calc(...) non mi fa parte dello standard (per lo meno fino a qualche anno fa), per cui potrebbe non essere supportato dai browser.

**EliBelTI** · 17-02-2016, 11:52

a me pare che il body abbia sempre un width 100% di default, anche i div riempiono sempre tutto lo spazio in larghezza, a meno che non venga settato il valore. quello che potrebbe ancora incidere è il margin e il padding di default, che per miglior gestione setto sempre a 0 e dove mi serve lo calcolo io. il calc(...) lo uso spesso e per adesso non mi ha mai dato problemi.
in ogni caso mi concentrerei sull'immagine, ho ipotizzato di mettere l'immagine come sfondo per evitare un ritaglio effettivo, può andare bene lo stesso?

**Mich_** · 17-02-2016, 12:57

a me pare che il body abbia sempre un width 100% di default

Questo non e` vero. Succede in alcuni browser, ma non in tutti.

L'immagine va messa come sfondo se non contiene informazioni (se e` solo un abbellimento). Altrimenti e` un errore sematico.

Discussione: Ritagliare e centrare una immagine

Strumenti discussione

Ricerca discussione

Visualizza

Ritagliare e centrare una immagine

Permessi di invio