Responsive slika

5 naročnikov

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

Dej link na zs pa da vidmo kaj se da nardit.