在源代码中应用响应式图像属性

Question

我创建了两个版本的标志，一个垂直的和一个水平的，第一个用于移动屏幕，第二个用于桌面，从一个切换到另一个我需要图片元素。不幸的是，我在 Dreamweaver 和 Sublime 文本编辑器中都没有实现它。经过数小时的研究，我唯一注意到的是它只适用于虚拟图像（placehold.it）。更多的问题似乎是 srcset 属性（无论是什么浏览器，它都无法显示任何内容），而 src 属性似乎可以正确显示源图像。 任何形式的帮助将不胜感激！ （代码如下）

<picture>
 <source media="(min-width:600px)"
         srcset="assets/desk/logo horiz.png"/>
 <img src="assets/mob/logo vertical.png"/>
</picture>

Answer 1

最好使用 CSS 和媒体查询来完成。在您的 CSS 中，首先为您的徽标的移动版本设置一个图像，然后使用媒体查询覆盖不同屏幕宽度的第一个徽标，例如，当屏幕为 641 像素或更宽时，此示例使用不同的徽标：

.logo {
    height: 50px;
    width: 100px;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: left top;
}

@media screen and (min-width: 641px) {
.logo {
    height: 100px;
    width: 200px;
    background-image: url(images/logo2.png);
}
}