Login    Iscriviti
  • Autore
    Messaggio

Ridimensionare immagine in slideshow

Messaggio da leggereda LìôN88 » venerdì 14 marzo 2014, 18:02

ciao raga ho questo slideshow o come si chiama.

quando inserisco una foto se è grande si vede solo a metà , non si ridimensiona da sola e si adatta al quadro.



In Colori e Stili inserite:
Codice: Seleziona tutto
/* SLIDESHOW A SCORRIMENTO AUTOMATICO - http://ffmagazine.forumfree.it/?t=65226584 */
#slideshow {width: 580px; padding: 10px; margin: 10px auto} #slideshow input {display: none}
#mask {width: 100%; overflow:hidden}
#slides {background: #EEE; padding: 10px; border: 3px solid #CCC; border-radius: 5px}
.slide_content {position: relative; width: 500%; -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}
#pan1:checked ~ #slides .slide_content {margin-left: 0}
#pan2:checked ~ #slides .slide_content {margin-left: -100%}
#pan3:checked ~ #slides .slide_content {margin-left: -200%}
#pan4:checked ~ #slides .slide_content {margin-left: -300%}
.pannello {width: 20%; float: left}
#active {margin-top: 5px}
#active label {display: inline-block; width: 13px; height: 13px; border-radius: 10px; background: #CCC; border: 2px solid #FFF; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); margin: 5px}
#active label:hover {background: #AAA}
#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3),
#pan4:checked ~ #active label:nth-child(4) {background: #5690AD}



In Codice HTML --> Dove volete che appaia, inserite:
Codice: Seleziona tutto
<div id="slideshow">

<input checked="checked" type="radio" name="pan" id="pan1"> </input>
<input type="radio" name="pan" id="pan2"> </input>
<input type="radio" name="pan" id="pan3"> </input>
<input type="radio" name="pan" id="pan4"> </input>

<div id="slides">
<div id="mask">
<div class="slide_content">

<div class="pannello" id="p1"> <!-- Pannello 1 -->
CONTENUTO PANNELLO 1
</div>

<div class="pannello" id="p2"> <!-- Pannello 2 -->
CONTENUTO PANNELLO 2
</div>

<div class="pannello" id="p3"> <!-- Pannello 3 -->
CONTENUTO PANNELLO 3
</div>

<div class="pannello" id="p4"> <!-- Pannello 4 -->
CONTENUTO PANNELLO 4
</div>

</div></div></div>

<div id="active">
<label for="pan1"></label>
<label for="pan2"></label>
<label for="pan3"></label>
<label for="pan4"></label>
</div>

</div>


quindi ricapitolando vorrei che quando inserisco un'immagine in qualsiasi dimensione essa sia si ridimensionerà al quadro già impostato su una certa dimensione.
Ci sarà sicuramente un giusto codice che fa questo, ho fatto varie prove prima di chiedere a voi ma senza nessun risultato.

vi ringrazio in anticipo.
Immagine
Avatar utente
LìôN88
Pc-Intel
Pc-Intel
 
Messaggi: 257
Iscritto il: sabato 4 agosto 2012, 22:54
Sistema Operativo: Win 10
CPU: Quad-Core 3,80 GHz
RAM: 8,00 GB
HDD: 120gb e 500gb
Preassemblato: No

Re: Ridimensionare immagine in slideshow

Messaggio da leggereda LìôN88 » martedì 18 marzo 2014, 18:29

tipo inserisco un'immagine al pannello 1, ma non si adatta alla dimensione del pannello ma rimane con la sua dimensione originale.

Codice: Seleziona tutto
<div class="pannello" id="p1"> <!-- Pannello 1 -->
CONTENUTO PANNELLO 1
</div>
Immagine
Avatar utente
LìôN88
Pc-Intel
Pc-Intel
 
Messaggi: 257
Iscritto il: sabato 4 agosto 2012, 22:54
Sistema Operativo: Win 10
CPU: Quad-Core 3,80 GHz
RAM: 8,00 GB
HDD: 120gb e 500gb
Preassemblato: No

Re: Ridimensionare immagine in slideshow

Messaggio da leggereda mo_ » venerdì 21 marzo 2014, 12:58

Purtroppo senza del codice server che te la ridimensioni ci puoi fare veramente poco a parte che fare così:

Codice: Seleziona tutto
<style type="text/css">
.pannello img {
width:100px;
height:100px;
}
</style>


spero che sia solo questo il problema
Avatar utente
mo_
Mod
Mod
Pc-Member
Pc-Member
 
Messaggi: 210
Iscritto il: sabato 5 gennaio 2013, 15:49
Sistema Operativo: Windows Vista 32
CPU: Q6600
RAM: 4 GB
Preassemblato: No

Re: Ridimensionare immagine in slideshow

Messaggio da leggereda giova95 » venerdì 21 marzo 2014, 20:51

Si può avere un link alla slideshow realizzata? Per vedere direttamente il problema... :)
Non chiedete chiarimenti tecnici per via privata! I problemi vanno esposti direttamente sul forum, per il bene di tutti.
Vota il forum! :-)
Avatar utente
giova95
Admin
Admin
Pc-Master
Pc-Master
 
Messaggi: 2854
Iscritto il: mercoledì 18 luglio 2012, 10:25
Località: Strona (BI)
Sistema Operativo: Windows 7
CPU: Intel Pentium T4500
RAM: 4GB DDR3
HDD: 320GB
Preassemblato:

Re: Ridimensionare immagine in slideshow

Messaggio da leggereda LìôN88 » sabato 19 aprile 2014, 17:34

Immagine
Avatar utente
LìôN88
Pc-Intel
Pc-Intel
 
Messaggi: 257
Iscritto il: sabato 4 agosto 2012, 22:54
Sistema Operativo: Win 10
CPU: Quad-Core 3,80 GHz
RAM: 8,00 GB
HDD: 120gb e 500gb
Preassemblato: No

Re: Ridimensionare immagine in slideshow

Messaggio da leggereda giova95 » lunedì 21 aprile 2014, 19:36

Nell'esempio funziona perfettamente. L'immagine viene ridimensionata.

Comunque, se proprio non ti funziona, aggiungi, negli stili:
.pannello img {
max-width:100%;
max-height:100%;
}
Non chiedete chiarimenti tecnici per via privata! I problemi vanno esposti direttamente sul forum, per il bene di tutti.
Vota il forum! :-)
Avatar utente
giova95
Admin
Admin
Pc-Master
Pc-Master
 
Messaggi: 2854
Iscritto il: mercoledì 18 luglio 2012, 10:25
Località: Strona (BI)
Sistema Operativo: Windows 7
CPU: Intel Pentium T4500
RAM: 4GB DDR3
HDD: 320GB
Preassemblato:

Torna a Creare e gestire un sito web

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite

Torna all'indice