根據窗口大小更改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

回答

相關問題