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

这是一个示例URL，我在其中进行了实际尝试。该图形位于右侧栏的“搜索”字段上方。其他映像尚未使用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的信息或更多信息，如果将其与bootstrap一起使用将更加容易。这些链接之一向您解释如何在引导程序中使用@media。媒体是这样工作的。如果屏幕小于最小宽度：768像素，则表示它是平板电脑，依此类推。在这里，您可以在CSS中看到带有实时示例的媒体。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

对于响应式图像，请使用宽度：100％和高：自动或在bootstrap 3中使用img-response类，或在bootstrap 4中使用img-fluid

更新：在引导程序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) { ... }

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

1 个答案: