img标签回顾--响应式图片

最新推荐文章于 2024-06-11 16:46:17 发布

上帝喜欢糖

最新推荐文章于 2024-06-11 16:46:17 发布

阅读量224

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_20623665/article/details/129454624

版权

文章展示了如何使用HTML的img标签结合srcset和sizes属性创建响应式图片，适应不同设备的屏幕宽度。此外，还提到了picture元素和source元素的组合应用，用于根据媒体查询条件切换不同图片，以实现更灵活的响应式设计。

摘要由CSDN通过智能技术生成

img是inline,行内元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    img {
      width: 300px;
      height: 300px;
    }

    .spanBox {
      width: 400px;
      height: 400px;
      background-color: red;
    }
  </style>
</head>

<body>
  <span>img上方行内标签</span>

  <img src="./111.jpg" alt="失败" />

  <span class="spanBox">img下方的标签===============</span>

</body>

</html>

span标签也是行内,看看效果---没问题(但是css样式内,我给img宽高.但是我并没有转换为块元素,或者行内块)img是有行内块的特性的或者说块级的特性

来实现一个响应式图片

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    /* img {
      width: 300px;
      height: 300px;
    } */

    .spanBox {
      width: 400px;
      height: 400px;
      background-color: red;
    }
  </style>
</head>

<body>
  <!-- srcset="./111.jpg 480w"设置文件名 -->
  <!-- 图片的固有宽度（以像素为单位）（480w）。注意，这里使用宽度描述符 w，而非你可能期望的 px -->
  <!-- 
    
    (max-width: 600px) 100px, 400px"
max-width小于等于600px 图片变为100px ,第二个参数为默认图片400px
-->
  img上方行内标签
  <img src="./111.jpg" alt="失败" srcset="./111.jpg 480w ,./111.jpg 800w" sizes="(max-width: 600px) 100px,
  400px" />
  img下方的标签===============

</body>

</html>

官方解释

srcset 定义了浏览器可选择的图片设置以及每个图片的大小，每张图片信息的设置和前一个用逗号隔开，每个设置要写：

一个文件名（elva-fairy-480w.jpg）
一个空格
图片的固有宽度（以像素为单位）（480w）。注意，这里使用宽度描述符 w，而非你可能期望的 px

sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择——这就是我们之前提到的提示。上面的示例中，在每个逗号之前，我们写：

一个媒体条件（(max-width:600px)）——你会在 CSS 主题中学到更多相关的知识，这里我们说一个媒体条件描述了一种屏幕可能处于的状态。上面示例中，我们说“当视口的宽度小于等于 600px 时”。
一个空格
当媒体条件为真时，图像将填充的槽的宽度（480px）

精简,自己的总结理解

srcset --可以,

图片的固有宽度（以像素为单位）（480w）。注意，这里使用宽度描述符 w

可以逗号分割,设置响应图片的像素

sizes

(max-width: 600px) 100px, 400px"
max-width小于等于600px 图片变为100px ,第二个参数为默认图片400px

实现效果

<picture> 元素包含了一些 <source> 元素

实现响应式切换图片

  <picture>
    <source media="(max-width: 600px)" srcset="./111.jpg" />
    <source media="(min-width: 800px)" srcset="./1668702167789.png" />
    <img src="./1668702167789.png" alt="">
  </picture>

实现效果