Come visualizzare un'immagine a schermo intero

<a href="FullSize.jpg"><img alt="thumb" src="thumb.jpg"></a>

Quando il pollice sopra viene cliccato il browser visualizzerà FullSize.jpg di dimensioni per adattarsi alla finestra del client del browser e quando il cursore si sposta su di esso un '+' appariranno per indicare che facendo clic sull'immagine verrà visualizzata a grandezza originale. Quello che voglio fare è visualizzare l'immagine a grandezza originale in primo luogo, senza richiedere all'utente di fare clic su di esso per ottenere le dimensioni complete. Come si fa a fare questo?Come visualizzare un'immagine a schermo intero

fonte

2010-10-02 Jim

Visualizzare l'immagine completa: <img alt="full image" src="FullSize.jpg" />?

Modifica Ah, ora so cosa intendi. Come ha detto David Thomas, questo dipende dal browser. Se vuoi che l'immagine sia mostrata a grandezza intera, non puoi collegarti direttamente all'immagine. Con HTML solo si può fare qualcosa di simile:

<a href=fullsize.html"><img alt="thumb" src="thumb.jpg"></a>

questo aprirà una nuova pagina HTML, che consente di visualizzare l'immagine:

fullsize.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Your image title</title> 
    </head> 
    <body> 
    <img src="FullSize.jpg" style="width:100%;height:100%;" alt="" /> 
    </body> 
</html>

Ma alla fine questa non è davvero la strada da percorrere. La cosa migliore da fare è dare all'utente la scelta di come vengono visualizzate le cose e non forzare qualcosa su di esse. Se lavorano su una risoluzione più bassa e visualizzi una grande immagine a grandezza naturale, non c'è modo per loro di cambiarla. È preferibile collegarsi semplicemente all'immagine e se l'utente decide di visualizzarlo a schermo intero, può fare clic sull'immagine per ridimensionarla.

fonte

2010-10-02 17:46:55 Alec

Basta rimuovere l'ancora </a> che circonda l'immagine. Se si desidera "garantire" di visualizzarlo a grandezza originale, aggiungere width="100%" nel tag <img />.

Inoltre, per visualizzarlo completamente, non dovrebbe essere ancorato da nessuna parte. È sufficiente pubblicare l'immagine immediatamente in un tag <body>.

fonte

2010-10-02 17:50:54

Non riesco a visualizzarlo a grandezza naturale dov'è, c'è solo spazio per il pollice. – Jim

Suppongo che ci sia un CSS (qualcosa come 'a img {...}') a cui è stata assegnata una larghezza fissa, quindi l'immagine non viene visualizzata a schermo intero. Commenta la dichiarazione 'width' nel CSS. –

@Jim, non c'è spazio per mostrare l'immagine a dimensione intera, ma vuoi mostrare l'immagine a dimensione intera? Non calcola ... – Alec

creare una pagina FullSize.html con <img src="FullSize.jpg"/> e

esposizione tumb con il collegamento a tale file

<a href="FullSize.html"><img alt="thumb" src="thumb.jpg"></a>

fonte

2010-10-03 17:05:09 jcubic

Purtroppo, ciò che si descrive è una funzione del browser UI (o 'bug', a seconda della punto di vista), e può essere abilitato/disabilitato solo dall'utente. Solitamente tramite le opzioni 'modifica preferenze'.

È fatto solo se l'immagine a dimensione intera è più grande della porta di visualizzazione, in modo che l'utente possa vedere l'intera immagine senza dover scorrere, è fatto "live" in modo che l'immagine stessa non sia compressa/ridimensionato, appena ridimensionato per adattarsi al viewport. È anche immediatamente, e intuitivamente, non eseguibile dall'utente in un solo clic. Non sono sicuro che, se ci fosse un modo per aggirarlo, potrei raccomandare una tale tecnica, soprattutto perché è una caratteristica che mi rende felice molto più spesso, come sviluppatore e utente, di quanto non mi dispiaccia da esso.

L'unico modo per aggirarlo, quello che posso pensare è trovare l'altezza/larghezza nativa dell'immagine, avvolgerla in un div con quelle dimensioni (più una piccola imbottitura). Non sono sicuro che funzionerà, ma è l'unica cosa che mi viene in mente ora ci sto pensando.

fonte

2010-10-03 17:11:42

Come visualizzare un'immagine a schermo intero

risposta

Problemi correlati