Question

我创建了两个版本的徽标，一个是垂直版本，另一个是横向版本，第一个用于移动屏幕，第二个用于桌面，用于从一个交换到另一个我需要的图片元素。不幸的是，我无法在Dreamweaver和Sublime文本编辑器中实现它。经过数小时的研究后，我唯一注意到的是，它只适用于虚拟图像（placehold.it）。甚至更多的问题似乎是 srcset 属性（无论显示什么是浏览器都无法显示），与src属性相比，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中，首先为您的徽标的移动版本设置图像，然后使用媒体查询覆盖不同屏幕宽度的第一个徽标，例如此示例在屏幕为641px或更宽时使用不同的徽标：

.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);
}
}

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

1 个答案: