Imagine în ecran complet cu tag-ul img (Programare, Html, Css, Imagine, Responsive Design, Imagine De Fundal)

Anju Aravind a intrebat.

Folosesc tag-ul img pentru imaginile mele de glisare, am nevoie de tag-ul imaginea să fie pe toată lățimea și înălțimea și centrată în interiorul containerului său.

Problema mea este că atunci când redimensionez lățimea ferestrei, imaginea mea devine mică și înălțimea ei nu urmează înălțimea ferestrei. Am nevoie ca același comportament ca și background-size: cover dar cu tag-ul imagine.

background: url(../images/slider/002.jpg) center center; 
background-size: cover;

Dacă fac imaginea ca fundal, totul funcționează bine, dar nu și sliderul. Trebuie să folosesc tag-ul <img> Aici se află tag-ul meu exemplu.

Comentarii

  • Încercați să setați înălțimea minimă folosind interogarea media pentru alte dispozitive –  > Por G.L.P.
  • am nevoie să folosesc tag-ul imagine în sine. –  > Por Anju Aravind.
  • Ați dorit ceva de genul acesta codepen.io/anon/pen/ECJmH –  > Por Tushar.
1 răspunsuri
web-tiki

Există mai multe moduri de a face un imagine să acopere un div cu tag-ul image, cel mai simplu este să folosiți tag-ul proprietatea object-fit astfel :

Suportul browserului este bun pentru object-fit (a se vedea canIuse), dar dacă aveți nevoie să suportați mai multe browsere (cum ar fi IE), puteți utiliza această tehnică pentru a centrați o imagine pe ecran complet cu ajutorul proprietății <img> tag :

  • centrare verticală și orizontală cu poziționare absolută, valori negative de sus, jos, stânga și dreapta combinate cu margin:auto;
  • imaginea acoperă întotdeauna fereastra de vizualizare cu 100%. min-height și min-width

DEMO :

Comentarii

  • există vreo opțiune pentru a face ca imaginea să fie centrată cu js sau css? –  > Por Anju Aravind.
  • Da, puteți folosi css transform și margin-left pentru acest lucru: jsfiddle.net/Yq5KR/32 –  > Por wesleycoder.
  • @wesleycoder sau puteți folosi poziționarea absolută cu valori negative de sus / jos / stânga / dreapta combinate cu margin:auto; jsfiddle.net/webtiki/Yq5KR/33 –  > Por web-tiki.
  • Funcționează foarte bine cu imagini mici. În mod ciudat, imaginile mari nu sunt redimensionate, ci afișate mult prea mari. –  > Por ldwg.
  • @ldwg Am adăugat o altă tehnică care rezolvă problema cu imaginile mari cu object-fit proprietate. –  > Por web-tiki.