Kode virker ikke i Explore - please help

Picture elementet er ikke en del af HTML standarden, det er en eksperimentel teknologi som ikke understøttes af alle browsere. Så det er helt forventeligt at det ikke fungerer.

Brug i stedet et img element og @media queries i css til det samme.

Ok. Det gav en forklaring. Jeg er dog ikke så stærk til kode så kan du beskrive hvad der skal stå i CSS og hvad der skal stå i frontenden?

Eller benyt et polyfill, fx https://scottjehl.github.io/picturefill/

Nu fik jeg lige talt over mig før, du kan faktisk ikke skifte et img elements kildefil med @media queries, så du skal bruge et baggrundsbillede i stedet. Det gør dog ikke så stor forskel.

Men f.eks.

<div class="picture"></div>

Og så i din CSS:

.picture {
  width: 500px;
  height: 500px;
  background-image: url('https://dummyimage.com/600x400/cc0000/fff');
}

@media (min-width: 450px) {
  .picture {
    background-image: url('https://dummyimage.com/600x400/00cc00/fff');
  }
}

@media (min-width: 769px) {
  .picture {
    background-image: url('https://dummyimage.com/600x400/0000cc/fff');
  }
}

Du kan se det som eksempel her:
https://jsfiddle.net/yas3fLfp/
- Bare prøv at resize browservinduet.

Eller du kan gøre som keyser siger, hvilket omformer det endnu-ugyldige element til noget standardiseret bag kulissen.

Hej Slater,
Det virker næsten 100% men imellem knækkene så er billederne ikek responsive men fastlåste så de virker ikke ordentligt når man resizer.

Har tilpasset koden således:

.picture {
  width: 918px;
  height: 373px;
  background-image: url('http://www.lavpristelte.dk/wp-content/uploads/2016/11/forside_m-e1480283315925.jpg');
}

@media (min-width: 450px) {
  .picture {
    background-image: url('http://www.lavpristelte.dk/wp-content/uploads/2016/11/forside_t-e1480283304693.jpg');
  }
}

@media (min-width: 769px) {
  .picture {
    background-image: url('http://www.lavpristelte.dk/wp-content/uploads/2016/11/forside_dt-e1480283285809.jpg');
  }
}

Det virker som om at den øverste højde/bredde angivelse låser billederne så de ikke tilpasser sig skærmens størrelse.

Korrekt, mit eksempel var kun for at demonstrere udskiftningen af billedet, så jeg lavede bare en fast størrelse.

For at få det til at ændre størrelse med skærmen, skal du give det en bredde i procent (som regel 100%), eventuelt en max-width der er billedets fulde bredde, så det ikke resizer større end det er; så skal det have background-size: cover, og så skal du bruge et lille trick for at sætte højden på det.
Baggrundsbilleder har nemlig den lille forskel i forhold til <img> tags, at de er ligeglade med om billedet kan være i elementet, højden udvider sig ikke automatisk efter bredden. Men det kan du lave med padding-top. En padding-top i procent i CSS er nemlig en procent af bredden, ikke af højden (det virker totalt idiotisk, men det gør det), og derfor kan man simulere den responsive effekt med det.

Prøv f.eks.

.picture {
  width: 100%;
  padding-top: 70%;
  background-size: cover;
  background-image: url('https://dummyimage.com/600x400/cc0000/fff');
}

Så skal du bare justere de 70%, jeg brugte som eksempel her, indtil det passer med højden af dit billede.

Kan man bruge koden uden at gøre det til baggrundsbillede ?

Ikke helt forstået?
Som sagt kan du desværre ikke skifte "src" egenskaben for et billede med CSS, så du kan ikke bruge et img-tag. Men ud over det med højden, så er der ikke nogen synlig forskel på et baggrundsbillede og et alm. billede.

ok - prtøver mig lidt frem. Tak for hjælpen.

Husk fordele/ulemper i forhold til forskellige metoder - jeg tænker fx på hvad der reelt loades af klienten, accessibility samt seo.

#10: Den eneste potentielle ulempe jeg kan se, er at man ikke kan bruge et alt-property på billedet for SEO/accessibility. Men det havde opretter ikke brugt i sit eksempel alligevel, og er næppe noget stort problem.

Det der reelt loades af klienten er kun det aktive billede, da CSS bliver læst igennem og kun den aktive regel brugt, før browseren begynder at hente billeder.

Korrekt - men når fx picture er korrekt understøttet af alle ønskede klienter skal man bare fjerne en polyfill fremfor at kode noget om, så her og nu får man mere læsbar kode og fremadrettet mindre vedligehold. Men det får vi nok ikke så meget ud af at diskutere - begge muligheder er åben for spørger :)

Så fik jeg løst det og tilpasset det så det virkede som det skulle. CSS-koden blev som følger:

.picture {
  width: 100%;
  padding-top: 81%;
  background-size: cover;
  background-image: url('http://www.lavpristelte.dk/wp-content/uploads/2016/11/forside_m-e1480283315925.jpg');
}

@media (min-width: 450px) {
  .picture {
  width: 100%;
  padding-top: 52%;
    background-image: url('http://www.lavpristelte.dk/wp-content/uploads/2016/11/forside_t-e1480283304693.jpg');
  }
}

@media (min-width: 769px) {
  .picture {
  width: 100%;
  padding-top: 40%;
    background-image: url('http://www.lavpristelte.dk/wp-content/uploads/2016/11/forside_dt-e1480283285809.jpg');
  }
}

I kan se resultatet på forsiden af http://www.lavpristelte.dk/

Tak for hjælpen begge 2.