html - 将响应图像放入 Bootstrap (4) 列和 srcset/sizes 属性
问题描述
到现在为止,我有一个大图像并添加了“img-fluid”类。有了这个,我可以根据容器使图像增大或减小其大小。例如,问题在于 CSS 分辨率为 360 像素的移动设备正在显示 800 像素的图像。
出于这个原因,我想制作不同大小的图像,以便每个设备显示的图像与该设备上容器的大小更加一致。
我有一个我正在制作的网页的真实示例。接下来,我根据显示图像的分辨率向您展示图像的大小:
-------------------------------
| Screen | Rendered |
| Resolution | Image Width |
-------------------------------
| Above 1500px | 680px |
| 1500px | 672px |
| 1200px | 535px |
| 992px | 440px |
| 991px | 796px |
| 768px | 610px |
| 576px | 544px |
| 414px | 382px |
| below 414px | < 382px |
-------------------------------
<div class="container">
<div class="row mb-4 pb-2 pb-md-4 pb-lg-2">
<div class="col-12 col-md-10 col-lg-11 mx-auto">
<div class="row no-gutters">
<div class="col-12 col-lg-6">
<img src="example-image-1-800px.jpg" class="img-fluid" alt="">
</div>
<div class="col-6 d-none d-lg-block">
<img src="example-image-2-800px.jpg" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
</div>
// Bootstrap Breakpoints: 576px, 768px, 992px, 1200px and 1500px
根据这个实际测试,我得出结论,我的图像将达到的最大宽度是 796px!现在我根据之前的宽度生成我的图像:
example-image-800px.jpg
example-image-800px-2x.jpg (1600px width)
example-image-650px.jpg
example-image-650px-2x.jpg (1300px width)
example-image-500px.jpg
example-image-500px-2x.jpg (1000px width)
example-image-350px.jpg
example-image-350px-2x.jpg (700px width)
现在会发生什么?看了好几篇教程,看了官方文档,一定是我笨,因为我无法生成带有属性srcset和sizes的图片标签。我看不懂教程或官方文档,所以请您帮助我使用我在示例中提出的措施来构建图像标签,以便我能够理解它,从而能够对所有图像进行操作我正在做的网站。
非常感谢您!请帮忙!
解决方案
你试试图片html标签吗?
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>
推荐阅读
- python - 权重和偏差:登录和网络错误
- machine-learning - 生成器对象列表的计算平均值
- firebase - Bigquery:如何从 Firebase Analytics 重新导入过期的数据集?
- c - 我必须使用 2 种方法将这个数组中的元素从大到小排列,但输出完全不同
- python-3.x - 使用列表而不是字典来组织结果
- flutter - Flutter:如何向图像添加缩放功能
- java - Fabric - 加载游戏时 EntrypointException 崩溃
- java - 在 Swing 中自动组装拼图游戏(带有矩形瓷砖)的简单算法的问题
- python - Python中的顺序前向选择,特征名称有问题吗?
- pyspark - 设置 PYSPARK_SUBMIT_ARGS="--name" "PySparkShell" "pyspark-shell" && jupyter notebook