- Objective: - Breadcrumb: # 概念阐释 ### width:100% - 在HTML和CSS中都可以用width等于100%来定义照片的宽度，而不是像素px，照片就会与浏览器自适应。 ```css img { width:100%; height:auto; } ``` *img标签中还是定义图片的像素尺寸，在标签中做响应式图片的改动不行。* - width的问题是会把图片放大到占满整个浏览器，所以不太建议使用。 ### max-width - 即便是自适应，也不想尺寸无限放大下去，可以用`max-width`解决这一问题。 ```css img { max-width:100%; height:auto; } ``` - 但有一种情况，盒子外面的边框，要看起来像图片的边框，所以就不要自适应了，只能用像素px。参考[[CSS max-width]] ### 在不同宽度下显示不同的照片 - [x] 这里是3张图片，为什么引用了4张，分别什么意义？ - 用[[HTML picture 标签]]标签 ```html <picture> <source srcset="img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> ``` # 实例 # 相关内容 # 参考资料 [w3school](https://www.w3schools.com/css/css_rwd_images.asp)