在响应式设计中，图片的自适应布局是非常重要的一部分。不同的设备有不同的屏幕尺寸和分辨率，因此需要使用不同大小的图片来适应不同的设备。本文将介绍图片自适应布局的实现方法，包括使用 CSS 和 JavaScript 实现。
使用 CSS 实现图片自适应布局
CSS 是实现图片自适应布局的主要工具之一。以下是一些常用的 CSS 技巧：
1. 使用 max-width
在 CSS 中，可以使用 max-width 属性来限制图片的最大宽度。这样，当屏幕尺寸变小时，图片的宽度也会随之减小，从而适应不同的设备。
img { max-width: 100%; height: auto; }
在上面的代码中，我们将图片的最大宽度设置为 100%，这意味着图片的宽度将根据其容器的宽度进行调整。同时，我们将图片的高度设置为 auto，这样图片的高度也会根据宽度的变化自适应调整。
2. 使用 srcset
在 HTML5 中，可以使用 srcset 属性来指定不同大小的图片。浏览器会根据屏幕分辨率选择最适合的图片，从而提高网站的性能和用户体验。
<img src="small.jpg" srcset="large.jpg 2x, xlarge.jpg 3x">
在上面的代码中，我们指定了三张不同大小的图片。当屏幕分辨率为 2 倍时，浏览器将选择 large.jpg；当屏幕分辨率为 3 倍时，浏览器将选择 xlarge.jpg。
3. 使用 picture 和 source
在 HTML5 中，还可以使用 picture 和 source 元素来指定不同大小的图片。这种方法可以更加灵活地控制图片的显示方式。
<picture> <source media="(min-width: 768px)" srcset="large.jpg"> <source media="(min-width: 480px)" srcset="medium.jpg"> <img src="small.jpg" alt="A cute kitten"> </picture>
在上面的代码中，我们使用 source 元素指定了三张不同大小的图片。当屏幕宽度大于 768px 时，浏览器将选择 large.jpg；当屏幕宽度在 480px 和 768px 之间时，浏览器将选择 medium.jpg；否则，浏览器将选择 small.jpg。
使用 JavaScript 实现图片自适应布局
除了 CSS，JavaScript 也可以用来实现图片自适应布局。以下是一些常用的 JavaScript 技巧：
1. 使用 window.innerWidth 和 window.innerHeight
在 JavaScript 中，可以使用 window.innerWidth 和 window.innerHeight 属性来获取屏幕的宽度和高度。这样，我们就可以根据屏幕尺寸来动态调整图片的大小。
-- -------------------- ---- ------- -------- ------------- - --- ----------- - ------------------ --- --- - ----------------------------------- -- ------------ - ---- - --------------- - ------- - ---- - --------------- - ------ - -展开代码
在上面的代码中，我们根据屏幕宽度来动态调整图片的大小。当屏幕宽度小于 768px 时，图片的宽度将设置为 100%；否则，图片的宽度将设置为 50%。
2. 使用 window.onresize
在 JavaScript 中，可以使用 window.onresize 事件来监听屏幕尺寸的变化。这样，当屏幕尺寸变化时，我们就可以重新调整图片的大小。
window.onresize = function() { adjustImage(); };
在上面的代码中，我们使用 window.onresize 事件来监听屏幕尺寸的变化，并调用 adjustImage 函数来重新调整图片的大小。
示例代码
下面是一个完整的示例代码，演示了如何使用 CSS 和 JavaScript 实现图片自适应布局。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------- ----- -------------- ------- --- - ---------- ----- ------- ----- - ------ ----------- ------ - --- - ------ ---- - - -------- -------- -------- ------------- - --- ----------- - ------------------ --- --- - ----------------------------------- -- ------------ - ---- - --------------- - ------- - ---- - --------------- - ------ - - --------------- - ---------- - -------------- -- --------- ------- ------ ---- ------------ --------------- ------------------ ----- --------- ----- ------ ---- -------- ------- -------展开代码
在上面的代码中，我们使用 CSS 和 JavaScript 分别实现了图片自适应布局。当屏幕宽度小于 768px 时，图片的宽度将设置为 100%；否则，图片的宽度将设置为 50%。同时，我们还使用了 srcset 属性来指定不同大小的图片，从而提高了网站的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d1f164a941bf71343e3d2d
