我正在嘗試創建一個回應式網站。為此，我找到了一個漂亮的模板并根據我的需要進行了調整。
然而，到目前為止我找不到解決方案的一件事是調整具有不同尺寸的影像的大小。
假設我有一個寬度為 600 像素的影像和一個寬度為 500 像素的影像。我的螢屏尺寸是 700 像素。我希望這兩個影像都以它們的原始寬度（600 像素和 500 像素）顯示。現在我將螢屏尺寸減小到 550 像素。我希望將 600 像素的影像調整為 550 像素。500px 影像沒有變化，因為原生寬度仍然小于螢屏。現在我將螢屏尺寸減小到 400 像素。兩個影像現在也應該相應地減小到 400 像素。
我已經在這里搜索和閱讀了幾個小時，但找不到自動解決方案。
我發現最好的事情是設定 <img style="width:100%;max-width:xxx px;" 其中 xxx 是影像的原始寬度。但是...我必須為每張圖片手動執行此操作！
如果沒有最大寬度，影像將始終被拉伸到螢屏尺寸的 100%。
作為替代方案，我找到了一些 JavaScript 來計算影像的原始寬度，并可用于填寫最大寬度值。
如果有人禁用 JavaScript（例如通過使用 NoScript 瀏覽器插件），那么整個事情就無法正常作業。
由于我使用 Perl 列印我的網站，因此我也可以使用 Perl 進行計算。這將有助于防止禁用 JavaScript。但是仍然......
真的沒有更好的解決方案嗎？我真的需要計算每個影像的最大寬度嗎？
這是當前正在進行的作業：https
://www.digioso.org/html5up-striped
該模板具有一個影像適合類，基本上將寬度設定為容器的 100%，然后我使用 width= 添加了相同的影像100%；最大寬度=400px。
影像適合使影像始終使用我不想要的 100% 的螢屏。
非常感謝！
uj5u.com熱心網友回復：
不要對影像標簽應用明確的寬度或高度。相反，給它：
max-width:100%;
max-height:100%;
檢查：如何自動調整影像大小以適合“div”容器？
uj5u.com熱心網友回復：
如果你的 css 中有這樣的東西：
img {
width: 100%;
}
影像嘗試采用其實際大小，并根據容器自動調整。如果您需要在螢屏變小時調整影像大小，您可以使用 @media 并定義相關行為。
@media (max-width: 700px) {
img {}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/514732.html
上一篇：影像圖示損壞的問題