讓我問一下，所以我有一個 Web 專案，如何使我網站上的影像在任何顯示中都具有回應性？這是我的代碼有什么錯誤嗎？
html code:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code:
@media screen and (max-width: 750px) {
.img-load{
width:100%;
height:auto;
}
}
uj5u.com熱心網友回復：
在使影像具有回應性方面，您有幾種選擇。
使用當前設定的寬度：100% 和高度：自動，您的影像已經可以在沒有媒體查詢的情況下進行回應。
如果您開始使用 px 作為高度和寬度的度量單位，您的影像不再具有回應性。
uj5u.com熱心網友回復：
如果您希望影像寬度在任何設備中覆寫整個頁面寬度，則無需 @media。只要：
HTML：
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS：
.img-load{
width:100%;
}
只有當您希望影像在任何設備中具有不同的寬度時，才必須使用 @media。
例如，如果您希望影像的寬度在大螢屏上為 50%，在小螢屏上為 100%，您可以設定：
CSS：
.img-load{
height: auto;
}
@media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
@media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392782.html