Question

尝试在这里学习一些基本的HTML。

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

我写了一个简单的HTML文件，应该切换不同屏幕宽度的图片，它几乎与文章中的例子相同，但它不起作用，出了什么问题？

这是代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
    body {
        max-width: 1200px;
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur libero nibh, convallis nec mattis in, varius sed turpis. Fusce dapibus purus sapien, ut maximus tortor dictum a. Praesent venenatis pharetra placerat. Cras eu aliquam augue. Nullam id luctus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce faucibus lectus sed magna euismod tempor. Aliquam sed consequat sapien, in finibus lorem. Suspendisse cursus ultrices dolor id dictum. Proin cursus nisi scelerisque, molestie lacus vel, imperdiet odio. Curabitur at augue gravida metus consequat congue. Quisque sed orci accumsan erat iaculis feugiat. Sed ornare mi id est fringilla sodales. Quisque enim leo, ornare vitae sapien eu, blandit dignissim sapien. Maecenas venenatis pretium vestibulum. </p>
    <picture>
        <source media="(max-width: 799px)" srcset="Vanessa Vailatti Portrait.png">
        <source media="(min-width: 800px)" srcset="Vanessa Vailatti.png">
        <img src="Vanessa Vailatti.png" alt="Vanessa Vailatti standing by the lake">
    </picture>
</body>
</html>

Answer 1

“Vanessa Vailatti.png”这个形状不能是png。 “vanessa-vailatti.png”应该是这样的。

Answer 2

图片名称不能与空格一起显示要么名称需要用“ - ”或“_”保存，要么“两个单词之间没有空格”。通过更改代码中的图像名称来检查。它对我有用。

无法使用<picture>和<source />元素切换图片

2 个答案: