根据窗口大小更改img

我希望我的VS2015网站显示我在桌面上创建的更加水平的图像，并在移动设备上创建更垂直的图像。我有两个单独的裁剪图像，以避免上浆失真。我曾尝试使用CSS与媒体查询来隐藏或显示，但它始终显示两个图像（其他媒体查询调整页面上的大小工作正常）。我已经尝试了图片的标签：根据窗口大小更改img

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

和下载图片填充并添加这头

仍然没有成功。对于新手问题抱歉，但我会喜欢一些看似简单的想法的帮助。

格雷格

来源

2016-12-31 Greg W

不知道我做了什么不同的.....但现在的代码运行完美。我刚刚开始在等待帮助中添加项目的其他部分...现在它工作的很好。

<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-31 04:29:22

根据窗口大小更改img

回答

相关问题