Scalare imagine in functie de rezolutie

[andras]

Salut,
Am o imagine 600 x 400 (exemplu: <img src="img/chess.jpg"/>) care e afisata in pagina la deschidere. Vreau ca la o anumita rezolutie (ex. pentru device-uri cu width < 500px - smartphone) aceasta imagine sa fie scalata corespunzator. Stiu in mare cum se face, dar nu-mi iese. Am pus

Cod: Selectaţi tot

<meta name="viewport" content="width=device-width, initial-scale=1.0">

iar in css

Cod: Selectaţi tot

@media only screen and (max-width: 500px) {... }

dar cum fac imaginea? O solutie ar fi sa fac imaginea in 2 variante, una cu 600 x 400 cealalta cu 110 x 72 dar este calea cea mai corecta? Multumesc.

Salut
Se poate cu o singura imagine, in felul urmator.
1. Se adauga imaginea intr-un Div.
2. La imagine se pune: width="100%".
3. In css se seteaza dimensiunea "width" la acel Div cat vrei sa fie imaginea. Si un @media screen and (max-width: 500px) cu alt "width" la acel Div cat vrei imaginea la rezolutie 500px.
- Exemplu:

Cod: Selectaţi tot

<style>
#dvimg1 {
margin: 3px auto;
text-align: center;
width: 800px;
}
@media screen and (max-width: 500px){
  #dvimg1 {
  width: 480px;
  }
}
</style>

<div id="dvimg1"><img src="dir/image.jpg" width="100%" /></div>

Acum functioneaza foarte bine.
Se poate extinde aceasta modalitate la toate div-urile chiar daca nu contin imagini? Ar fi excelent.
- Edit: am extins la mai multe div-uri si functioneaza.

Acum mi-am dat seama ca se poate si fara a adauga imaginea special intr-un Div. Simplu, ii adaugi un "id" sau "class" si ii setezi dimensiunea "width" in css, in functie de rezolutie. Iar in tag-ul <img>, Optionl, se poate adauga: width="100%" (doar ca sa fie valid html).

Cod: Selectaţi tot

<style>
#img1 {
width: 800px;
}
@media screen and (max-width: 500px) {
  #img1 {
  width: 480px;
  }
}
</style>

<img src="dir/image.jpg" id="img1" width="100%" />