Klausimas del responsive nuotraukos

Sveiki,

Turiu klausimeli. Kaip padaryti nuotrauka kuri prisitaikytu prie visu irenginiu? Nes dabar per kompiuterio ekrana rodo tvarkinggai, per telefona tiesiog nuotraukos viduri. Bandziau ziurineti css failus, taciau paciam nepavyko.

Cia shopify sistemoje.

Aciu.

Background properties žiūrėk,

background-position

background-size

Ant mobile jei tau reikia rodyti turini visą nuotraukos dažniausiai deda kita sumažina paveiksliuką, jis keičiasi priklausomai nuo rezoliucijos.

Kitas variantas nedaryti jį kaip background o kaip img.

naudok @media taga tarp css, taip pagal rezoliucijos dydi galesi pakeisit nuotraukos dydi. Pvz:

@media screen and (max-width: 1000px) and (min-width: 700px) {
 img {
   width:  500px;
   height: 500px;
 }
}

naudok @media taga tarp css, taip pagal rezoliucijos dydi galesi pakeisit nuotraukos dydi. Pvz:

 

@media screen and (max-width: 1000px) and (min-width: 700px) {
 img {
   width:  500px;
   height: 500px;
 }
}

Geriau būtu padaryti nuotrauką, kuri prisitaikytų visados priklausomai nuo browserio dydžio, o ne tikslius išmatavimus sudėti.

Jei norim ne visiems img, o tik konkreciam img kuris turi klase: nuotraukos-klase

.nuotraukos-klase {
   display:block;
   width:100%;
   height:auto
}

Jei norim globaliai visiems img

img {
   display:block;
   width:100%;
   height:auto
}

! Priklausomai nuo to kokia web struktura, gali reiketi containeriu ( jei nera ).

Jei norim ne visiems img, o tik konkreciam img kuris turi klase: nuotraukos-klase

.nuotraukos-klase {
   display:block;
   width:100%;
   height:auto
}

 

Jei norim globaliai visiems img

img {
   display:block;
   width:100%;
   height:auto
}

 

! Priklausomai nuo to kokia web struktura, gali reiketi containeriu ( jei nera ).

Tai buvo tik pavyzdys kaip naudot @media taga, nieko konkretaus

eqls tavo posto nekomentavau, tiesiog parasiau autoriui, bet jei jau uzkabinai mane, tai: Media naudojimas:

Tavo kodas:

@media screen and (max-width: 1000px) and (min-width: 700px) {
 img {
   width:  500px;
   height: 500px;
 }
}

Nei yra blogas nei yra geras..

As rasyciau taip:

/* Large */
@media screen and (max-width: 1920px)  {
 img {
   display:block;
   width:  100%;
   height: auto;
  }
}

/* Medium */
@media screen and (max-width: 1024px)  {
 img {
   display:block;
   width:  75%;
   height: auto;
   margin:0 auto;
  }
}

/* Small */
@media screen and (max-width: 678px)  {
 img {
   display:block;
   width:  50%;
   height: auto;
   margin:0 auto;
  }
}
/* Very Small */
@media screen and (max-width: 480px)  {
 img {
   display:block;
   width:  25%;
   height: auto;
   margin:0 auto;
  }
}