Responsive slika

Hmm ..

imam tri fotke v eni vrsti. Na tablici horizontalno se pravilno prikazujejo, ker je dovolj prostora, v vertikalni postavitvi, pa jih postavi 2 v vrsto in tretjo v sredino spodaj ...

Kako dopovedati img src, da naj bo responsive :)?

Še koda, ki jo trenutno uporabljam

<div style="background-color:#dddada;text-align:center;"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div><a target="_blank" href="http://www."><img src="../images/dan.png" onmouseover="this.src='http://www..jpg'" onmouseout="this.src='http://www..png'"</a>

            <a target="_blank" href="si"><img src="../images/png" onmouseover="this.src='http://.jpg'" onmouseout="this.src='.png'"</a>

            <a target="_blank" href="http://"><img src="../images/png" onmouseover="this.src='jpg'" onmouseout="this.src=png'" /></a>

        </div>

Hvala

P.s. nevermind linke in linke do slik .. sem jih zabrisal

img {

   width: 33.33%;

   float: left;

}

Mogoče ti pomaga.

Odvisno od predloge. Če uporabljaš responsive predlogo, je zadaj verjetno bootstrap.

Pri bootstrap 2 samo dodaš img class="span4".

Kaj pa je cilj? Da so vse tri v eni vrsti, pa toliko manjše ali, da je vsaka v svoji vrsti in recimo 80% širine? Oboje je responsive.

cilj je da dobim vse tri v vrsto .. do neke mere sem rešil zadevo z 33% width .. sedaj je ok na vseh napravah

Aha, no ok. Jaz bi v tem primeru naredil tako, da bi divu dal nek class, npr. slike, potem pa css:

.slike {

display: block;

width: 100%;

}

.slike > a {

display: inline-block;

float: left;

width: 31%;

height: 200px;

overflow: hidden;

padding: 0 1%;

}

.slike > a img {

width: 100%;

height: auto;

}

Evo, tukaj primer:

http://jsfiddle.net/4FR6x/1/

hvala lepa za pomoč

Zakaj pa ne omejiš css na viewport in prilagojen css?

OvcaX .. hvala za vprašanje, amapk je zašlo na popolnoma neznano področje :) Nisem tulk designerja in programerja :(

Poanta je v temu, da maš ločen css za določene velikosti

Ponavadi en glaven css in potem vključis sprememebe spodaj za y xxx do xxx in tako naprej. Nekako takole

@media (min-width: 481px) and (max-width: 768px){

Koda

}

Pa še tole https://www.ibm.com/developerworks/community/blogs/bobleah/entry/codeexampleofresponsivewebdesignusingcss3media_queries13?lang=en