Problemi con le barre di scorrimento sul ridimensionamento quando si cerca di immagine Adatta allo schermo senza distorcere

Question

Sto cercando di fare tipo di effetto codice jsFiddle uno schermo presentazione completa qui , ma io sto avendo dei dubbi su come farlo. Come si può vedere dal mio esempio violino, voglio la foto per essere il più grande possibile senza snaturarlo (Adatta allo schermo). Voglio anche che sia centrato verticalmente e orizzontalmente.

Horzontal centraggio è curato in css, ma ho dovuto usare JavaScript per centratura verticale.

Le mie domande sono:

1. C'è un modo migliore per fare nulla di tutto questo (per esempio tutto in CSS)?
2. Il primo carico, se l'immagine (prima che è stata ridotta) è più larga della finestra, una barra di scorrimento è presente mentre il mio script calcola l'altezza della finestra. Ciò significa che quando il mio script inserisce il div e img alla finestra, c'è un gap bianca in fondo, che è l'altezza della barra di scorrimento. Posso ottenere intorno a questo specificando overflow: hidden, ma sembra un po 'un work-around. C'è un modo migliore? Sarebbe portando l'immagine di meglio?
3. Quando ho ridimensionare in modo che il div è più largo l'immagine, ottengo una sezione bianca sotto il div nero, che crea una barra di scorrimento verticale. Anche in questo caso posso sbarazzarsi di questo con overflow: hidden, ma non mi piace questo approccio. Voglio sapere perché è lì e come sbarazzarsi di esso?
4. A volte mi può far apparire una barra di scorrimento orizzontale e come a ridimensionare lo lampeggia on / off. overflow: hidden correzioni questo, ma voglio una soluzione più pulita .
5. Ci sono modi migliori di codifica questo, oppure possono mia jQuery / Javascript ottimizzare ulteriormente?

Answer 1

Beh ... che quelli difficili. Il modo migliore che ho trovato il modo per farlo è quello di mettere in realtà i contenuti in una singola tabella cellulare e impostare le proprietà verticale- e orizzontale-align di .... centro e centro penso? Ma tant'è, si può fare. Giocherò in giro con esso e vedere se riesco a ottenere un esempio insieme.

EDIT:

Ok, quindi la prima cosa che vorrei consigliare è quello di lasciare il browser cose in proporzione di ridimensionamento. Non è necessario ridimensionare il div, solo l'immagine. È possibile lasciare che la figura del browser fuori l'allineamento verticale pure, che è una scelta migliore rispetto molto calcolo. Questo può essere fatto mettendo il contenuto di una singola tabella cella. Il codice di esempio riportato di seguito è puro html e css. È possibile aggiungere qualcosa per l'effetto che si dispone già di per commutare l'altezza e la larghezza tra il 100% Auto e Auto 100% in base all'altezza img vs altezza della finestra. Speriamo che questo si ottiene un po 'più vicino al vostro obiettivo.

<table style="background-color:#ddd; width:100%; height:100%">
  <tr>
    <td align="center">
      <div id="fulldiv">
        <img style="width:100%" id="photo" src="http://assets.perfectlytimedphotos.com/hashed_silo_content/silo_content/21003/resized/coke.jpg">
      </div>
    </td>
  </tr>
</table>

Answer 2

Non sono a conoscenza di qualsiasi soluzione crossbrowser in puro html / css per realizzare quello che hai chiesto. Qualsiasi elemento con un rapporto di aspetto e una larghezza fluido attiverà una "race condition" quando il browser decide di mostrare / nascondere la barra di scorrimento. Un browser forzerà una barra di scorrimento quando rileva questa situazione con elementi sotto il suo controllo. Questo può anche essere simulato con javascript. Ho anche incontrato questo problema e ha creato una piccola biblioteca:

https://github.com/ocbnet/layout

C'è anche una demo che implementa quello che il PO stava chiedendo:

http://www.ocbnet.ch/github/layout/demo/ fullscreen.html

Answer 3

1. Sì (per il 100% dell'altezza parte): html,body,div {height:100%}
2. overflow: hidden sembra gentile con me. Altre soluzioni possibili:
   1. <script>document.write('<img src="..." width="'+window.width()+'" [...] /> (document.write dovrebbe essere evitato tuttavia)
   2. <img src="" width="1" height="1" /> (vale a dire, definire una piccola dimensione di default -> nessuna barra di scorrimento)
   3. suggerimento @Gerben: css max-width (migliore)
3. Sembra essere lo spazio della barra di scorrimento orizzontale avrebbe preso. Ho solo questo problema a una specifica dimensione + rapporto troppo.
4. Questo è quando il pictureRatio è uguale o molto vicino al fullDivRatio. Non riesco a trovare hoo con overflow:. Hidden
5. Non ne ho idea, sembra abbastanza buono IMO.

Quindi sì, la barra di scorrimento strano su di ridimensionamento accade a causa dell'effetto di confine, la barra di scorrimento appaiono quando si passa dalla if al else o viceversa.

questo jsFiddle ho mai barra di scorrimento orizzontale, ma ho ancora ottenere una verticale di volta in volta .

Answer 4

Si può fare questo:

<div>
    <img id="photo" src="">
</div>

div {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
position: relative;
}

E 'tutto puro HTML e CSS. Un'alternativa alla risposta di Joseph di utilizzare tavolo se non si vuole usare la tabella nella struttura.