Тег <picture>в HTML5 не работает на chrome? - PullRequest
Новая
       1

Тег <picture>в HTML5 не работает на chrome?

1 голос
/ 09 июля 2020 
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive HTML sites</title>
</head>
<body>
    
    <picture>
        <source srcset="marbled.jpg" media= "(max-width: 600px)">
        <source srcset="rolemodel.jpg" media= "(max-width: 1400px)">
        <source srcset="supalonely.jpg">
    </picture>
</body>
</html>

Это мой код, и когда я запускаю его на chrome, нет никаких предупреждений или отображения. Все изображения находятся в одной папке, и когда я добавляю img перед источником, он показывает все изображения, а не показывает их в соответствии с шириной устройства

1 Ответ

2 голосов
/ 10 июля 2020

Вам нужно было добавить <img> вместе с источниками. Ссылка на дополнительную информацию на <picture>.

Пример кода ниже изменит размер изображения на экране. Надеюсь, это поможет 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive HTML sites</title>
    <style type="text/css">
        source, img{
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    
    <picture>
        <source srcset="https://9to5google.com/wp-content/uploads/sites/4/2019/03/google-images-material-theme.jpg?quality=82&strip=all&w=1600" media= "(max-width: 600px)">
        <source srcset="https://dg.imgix.net/do-you-think-you-re-happy-jgdbfiey-en/landscape/do-you-think-you-re-happy-jgdbfiey-9bb0198eeccd0a3c3c13aed064e2e2b3.jpg?ts=1520525855&ixlib=rails-4.0.1&auto=format%2Ccompress&fit=min&w=700&h=394&dpr=2&ch=Width%2CDPR" media= "(max-width: 800px)">
        <img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png">
    </picture>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...