0

我希望我的 VS2015 站点显示我在桌面上创建的更水平的图像，而在移动设备上显示更垂直的图像。我有两个单独的裁剪图像，以避免尺寸失真。我曾尝试使用带有媒体查询的 css 来隐藏或显示，但它总是显示两个图像（用于在页面上调整大小的其他媒体查询工作正常）。我试过图片标签：

<picture>
    <source srcset="../Images/Chalkboard414.jpg" media="(max-width: 450px)">
    <source srcset="../Images/Chalkboard900.jpg">
    <img srcset="../Images/Chalkboard900.jpg>"
</picture>

并下载图片填充并将其添加到标题

仍然没有成功。对于新手的问题，我很抱歉，但我希望得到一些帮助，这似乎是一个简单的想法。

格雷格

4

1 回答 1

0

不知道我做了什么不同......但现在代码完美无缺。我刚刚开始在等待帮助的同时添加项目的一些其他部分......现在效果很好。

<div style="width:80%; margin-left:10%">
<div style="position:relative">
<picture>
    <source srcset="../Images/Chalkboard414.jpg" media="(max-width: 450px)">
    <source srcset="../Images/Chalkboard900.jpg">
    <img style="width:100%" srcset="../Images/Chalkboard900.jpg"/>
</picture>
    <img style="position:absolute; width:80%; top:10%;left:20px" src="../Images/chalkcarpaltunnel.png" />
    <img style="position:absolute; width:80%; top:20%;left:20px" src="../Images/chalktriggerfinger.png" />
    <img style="position:absolute; width:80%; top:30%;left:20px" src="../Images/chalkfractures.png" />
    <img style="position:absolute; width:80%; top:40%;left:20px" src="../Images/chalkdupuytrens.png" />
    <img style="position:absolute; width:80%; top:50%;left:20px" src="../Images/chalkganglions.png" />
</div>
</div>
于 2016-12-31T04:29:22.193 回答