Question

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

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

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

仍然没有成功。对不起新手问题，但我会喜欢看似简单的想法。

格雷格

Answer 1

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

<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>

根据窗口大小更改img

1 个答案: