2011-10-21 17 views
6

Avere qualche difficoltà con lo zoom degli elementi HTML. In FF o Chrome, dare un'occhiata a (molto, molto semplice, piccolo codice):Zoom HTML/CSS

http://jsfiddle.net/92wHQ/4/

Dal menu a discesa, selezionare 150%. La casella della sfumatura in bianco e nero verrà ridimensionata al 150% della sua dimensione di origine. Ora che è ridimensionato, si noti che viene visualizzata la barra di scorrimento orizzontale e la barra di scorrimento verticale si espande per adattarsi all'altezza e alla larghezza nuove, più grandi e ridimensionate.

Ora passare dal 150% al 50%. La casella del gradiente scala effettivamente fino al 50%, ma si noti che la barra di scorrimento (verticale) non si contrae per adattarsi all'altezza nuova, più piccola e ridimensionata. Invece, c'è un mucchio di spazio vuoto vuoto sotto la casella del gradiente.

Come mai i browser aggiornano le barre di scorrimento per il ridimensionamento superiore al 100%, ma non inferiore al 100%? Come posso ottenere lo stesso comportamento per meno del 100% come faccio con più del 100%? Non voglio questo spazio bianco.

risposta

2

Ho alcune indicazioni su ciò che sta accadendo:

La scala influisce solo del riquadro del gradiente, ma non il div contenitore che è dentro. Quindi, quando ridimensionate la casella al 150%, la casella ora è comparativamente più grande della dimensione del contenitore div che è dentro (il div contenitore è sempre 496x250), quindi posiziona le barre di scorrimento.

D'altra parte, quando lo riduci, la casella della sfumatura è più piccola del contenitore div è interna, quindi non è necessario scorrere le barre di scorrimento.

Ci potrebbero essere diversi modi per gestirlo. Il problema principale è che non si sta gestendo il ridimensionamento/ridimensionamento del div contenitore.

+0

Tuttavia, quando lo si riduce, si noti che la barra di scorrimento orizzontale consente di scorrere troppo lontano, come se l'altezza della casella del gradiente non fosse mai cambiata. – user979672

2

modificato qualcosa nel violino. si prega di controllare se questo è ciò che si desidera:

http://jsfiddle.net/92wHQ/7/

quindi le barre di scorrimento sono in realtà basate sui% Dimensioni 100 e maggiori. nota come la barra di scorrimento 100% e la barra di scorrimento 50% hanno la stessa "dimensione" mentre il 150% è l'unica volta che diventa più piccola.

+0

Funziona bene! Ho passato ore a cercare di capire cosa c'era che non andava. Puoi spiegare come impostare il margine per correggere automaticamente questo? – vaidik