Forum

Scris: **Vin Apr 29, 2016**

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.

Scris: **Vin Apr 29, 2016**

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>

Scris: **Vin Apr 29, 2016**

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.

Scris: **Vin Apr 29, 2016**

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%" />

Forum

Scalare imagine in functie de rezolutie

Scalare imagine in functie de rezolutie

Scalare imagine in functie de rezolutie

Scalare imagine in functie de rezolutie

Scalare imagine in functie de rezolutie