Источник изображения не меняет изображение - PullRequest
Новая
       1

Источник изображения не меняет изображение

0 голосов
/ 08 марта 2019

Я создал элемент "picture".При этом у меня есть разные «исходные» теги, которые имеют изображения в соответствии с размером атрибута «медиа» и типом файла.

При изменении ширины экрана изображения не меняются в зависимости от размера экрана.

Ниже мой код 

<picture class="c-hero_picture">
    <source media="(min-width: 1200px)" type="image/webp" srcset="./img/webp/canada-1600x730.webp 1x, ./img/webp/canada-1920x730.webp 1.2x">
    <source media="(min-width: 1200px)" type="image/jpf" srcset="./img/jpf/canada-1920x730.jpf 1x, ./img/jpf/canada-1920x730.jpf 1.2x">
    <source media="(min-width: 1200px)" type="image/png" srcset="./img/png/canada-1920x730.png 1x, ./img/png/canada-1920x730.png 1.2x">

    <source media="(min-width: 600px)" type="image/webp" srcset="./img/webp/canada-800x730.webp 1x, ./img/webp/canada-1200x730.webp 1.5x, ./img/webp/canada-1600x730.webp 2x">
    <source media="(min-width: 600px)" type="image/jpf" srcset="./img/jpf/canada-800x730.jpf 1x, ./img/jpf/canada-1200x730.jpf 1.5x, ./img/jpf/canada-1600x730.jpf 2x">
    <source media="(min-width: 600px)" type="image/png" srcset="./img/png/canada-800x730.png 1x, ./img/png/canada-1200x730.png 1.5x, ./img/png/canada-1600x730.png 2x">


    <source type="image/webp" srcset="./img/webp/canada-400x730.webp 1x, ./img/webp/canada-600x730.webp 1.5x, ./img/webp/canada-800x730.webp 2x">
    <source type="image/jpf" srcset="./img/jpf/canada-400x730.jpf 1x, ./img/jpf/canada-600x730.jpf 1.5x, ./img/jpf/canada-800x730.jpf 2x">
    <source type="image/png" srcset="./img/png/canada-400x730.png 1x, ./img/png/canada-600x730.png 1.5x, ./img/png/canada-800x730.png 2x">
    <img class="c-hero_img" alt="…" src="./img/png/canada-400x730.png">
</picture>

1 Ответ

1 голос
/ 08 марта 2019

Я считаю, что лучший способ решить эту проблему - использовать таблицу стилей CSS

Сначала создайте HTML-код.

<img id="picture" src="https://cdn.pixabay.com/photo/2016/11/29/05/55/adult-1867665__180.jpg">

Источник в теге img:будет для изображения

Затем вам нужно будет определить идентификатор изображения, например 

#picture {
    width: 100%;
    height: 100%;
}

, а затем иметь медиа-правило, такое как 

@media screen and (min-width: 600px) {
    #picture {
        content: url(https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__180.jpg);
  }
}

Итак, ваша окончательная версия должна выглядеть примерно так: 

#picture {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 600px) {
  #picture {
    content: url(https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__180.jpg);
  }
}

@media (min-width: 1200px) {
  #picture {
    content: url(https://images.pexels.com/photos/1830569/pexels-photo-1830569.jpeg);
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>answer</title>
</head>

<body>
  <img id="picture" src="https://cdn.pixabay.com/photo/2016/11/29/05/55/adult-1867665__180.jpg">
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...