如何使此img srcset代碼正常工作？

Question

我正在嘗試在HTML5中使用img標簽的srcset屬性。 我的目標是根據設備的視口大小切換到較小的（文件大小和尺寸）圖像。 我的三個斷點是台式機，平板電腦和移動設備。

我已經閱讀了幾本有關如何使用img標簽的srcset屬性的在線教程，但是我似乎無法像人們所說的那樣使它起作用。 無論我是否將各種教程的確切代碼復制並粘貼到我的網站中，然后將圖像的URL和大小調整到其中，Chrome和其他瀏覽器都完全忽略了它。 我是否不知道有CSS或JS組件，人們只是假設我會使用？

<img 
     srcset="https://dev-fenfast.pantheonsite.io/wp-content/uploads/2019/06/FENFAST_sidebar_1_desktop_447w.jpg 447w, https://dev-fenfast.pantheonsite.io/wp-content/uploads/2019/06/FENFAST_sidebar_1_tablet_537w.jpg 537w, https://dev-fenfast.pantheonsite.io/wp-content/uploads/2019/06/FENFAST_sidebar_1_mobile_217w.jpg 217w" 
     sizes="(max-width: 1440px) 447w, (max-width: 768px) 537w, (max-width: 354px) 217w" 
     src="https://dev-fenfast.pantheonsite.io/wp-content/uploads/2019/06/FENFAST_sidebar_1_desktop_447w.jpg">

這是我正在嘗試的最基本的東西的CodePen-> https://codepen.io/anon/pen/XLzoaZ

這是一個示例網址，我在其中進行了實際嘗試。 該圖形位於右側欄的“搜索”字段上方。 其他映像尚未使用srcset實現。 -> https://dev-fenfast.pantheonsite.io/health/

我在Inspector控制台中找不到有關此看似簡單標記的任何錯誤消息。

Answer 1

如果您願意，我有更好的選擇。 可以使用純CSS或引導程序代替scrset。 這些鏈接可能會幫助您https://getbootstrap.com/docs/4.0/layout/media-object/ https://getbootstrap.com/docs/4.0/layout/overview/還了解有關如何在CSS中使用@media的更多信息或更多，如果與引導程序一起使用，會更容易。 這些鏈接之一向您解釋如何在引導程序中使用@media。 媒體是這樣工作的。 如果屏幕小於最小寬度：768像素，則表示它是平板電腦，依此類推。 在這里，您可以在CSS中看到帶有實時示例的媒體。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

對於自適應圖像，請使用width：100％和high：自動或在bootstrap 3中使用img-response類，或在bootstrap 4中使用img-fluid

更新：在bootstrap 4中使用它

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }