Come rendere un’ immagine Responsive
In questo articolo vedremo come rendere una qualsiasi immagine responsive.
Quest’immagine potremo poi aggiungerla comodamente a un post che stiamo creando oppure pubblicarla nel nostro spazio web sottoforma di pagina HTML da richiamare.
Il metodo sicuramente più rapido e diretto, tramite HTML, è quello di andare ad aggiungere dove desideriamo che compaia la nostra immagine il seguente codice:
|
1 2 3 4 5 |
<span class="tag"><p></span> <span class="tag"><a</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"<span style="color: #0000ff;">LINK DEL MIO SITO WEB</span>"</span> <span class="atn">target</span><span class="pun">=</span><span class="atv">"_blank"</span><span class="tag">></span> <span class="tag"><img</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"<span style="color: #0000ff;">LINK IMMAGINE</span>"</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">'</span><span class="kwd">width</span><span class="pun">:</span><span class="lit">100%</span><span class="pun">;</span><span class="atv">'</span> <span class="atn">border</span><span class="pun">=</span><span class="atv">"0"</span> <span class="atn">alt</span><span class="pun">=</span><span class="atv">"Null"</span><span class="tag">></span> <span class="tag"></a></span> <span class="tag"></p></span> |
Ovviamente modificheremo le scritte in blu:
“LINK DEL MIO SITO WEB” = inseriremo qui il link a cui vogliamo far andare gli utenti una volta cliccata l’immagine
“LINK IMMAGINE” = Inseriremo il link dell’immagine precedentemente caricata sul server oppure l’url di un immagine già presente sul web.
|
1 |
<span class="tag"><img</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"IMAGE LINK"</span> <span class="atn">border</span><span class="pun">=</span><span class="atv">"0"</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"responsive-image"</span> <span class="atn">alt</span><span class="pun">=</span><span class="atv">"Null"</span><span class="tag">></span> |
Poi, nel file CSS apportiamo la modifica:
|
1 2 3 4 |
<span class="pun">.</span><span class="pln">responsive</span><span class="pun">-</span><span class="pln">image</span><span class="pun">{</span><span class="pln"> height</span><span class="pun">:</span><span class="kwd">auto</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="lit">100</span><span class="pun">%;</span> <span class="pun">}</span> |
style=”display:inline-block;width:645px;height:100px” data-ad-client=”ca-pub-0587361132440966″ data-ad-slot=”2759130652″>
Hai altre domande riguardo quanto appena trattato?
Aggiungi un commento qui sotto e vedrai che troverai risposta quanto prima!
