如何将 HTML 图像标签用于响应式图像?

Posted

技术标签:

【中文标题】如何将 HTML 图像标签用于响应式图像?【英文标题】:How do i use HTML image tag for responsive images? 【发布时间】:2020-03-25 09:35:22 【问题描述】:

我正在尝试为我的网页使用响应式图像,但在较小的视口中尝试时,chrome 似乎总是获取全角图像 (1280x1920)。我尝试清除缓存并使用隐身模式,但没有任何效果。

Chrome:版本 80.0.3968.0(官方构建)开发版(64 位)

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<img 
src="https://develop:8065/app/uploads/2019/11/photo-1574950578143-858c6fc58922-768x1152.jpeg" 
srcset="
https://develop:8065/app/uploads/2019/11/photo-1574950578143-858c6fc58922-375x563.jpeg 375w, 
https://develop:8065/app/uploads/2019/11/photo-1574950578143-858c6fc58922-768x1152.jpeg 768w,
https://develop:8065/app/uploads/2019/11/photo-1574950578143-858c6fc58922-1280x1920.jpeg 1280w" 
sizes="(max-width: 375px) 375px, (max-width: 768px) 768px, (max-width: 1280px) 1280px, 1920px" 
 
title="1">

【问题讨论】:

尝试删除src属性... 您是否尝试过添加style 属性?例如。 style="width:375px;" 【参考方案1】:

一个选项可以是添加width="100%" 属性以使图像响应。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Responsive Image</title>
  </head>
  <body>
    <img 
      src="https://api.nasa.gov/assets/img/general/apod.jpg" 
      
       />
  </body>
</html>

【讨论】:

以上是关于如何将 HTML 图像标签用于响应式图像?的主要内容,如果未能解决你的问题,请参考以下文章

响应式网页设计和调整图像大小

scss 响应式图像,srcset,图片标签

响应式图像

响应式设计:如何调整图像/背景图像的大小并垂直对齐 div?

HTML CSS 响应式地将图像堆叠在两列中

amp 图像被拉伸,用于响应式布局