首页 > 开发 > CSS > 正文

纯CSS实现的响应式图像显示(无javaScript)

2024-07-11 08:52:40

字体：大中小

来源：转载

供稿：网友

有许多方法可以实现web页面里图像的应答。然而，我碰到的所有方案都使用了JavaScript。这使我疑惑不用JavaScript实现图像响应是否可行。

我提出了下面纯CSS的方案。

它是如何工作的呢？

我把<img>标签防止在<span>内。src属性将从服务器获得手机版本的图像。接着我还在<span>元素内部包含了一点CSS。

什么？？HTML文档中能嵌入了CSS?

是的，只要你增加了scoped属性，这就在HTML5里就是非常有效的。在这个CSS里，我从某个断点开始用了@media查询把作为背景的高清图像添加到<span>里。在下面这段代码里，我只添加了一个断点，然而你当然可以按你喜欢的增加许多。

通过使用背景图像指示符，只有在需要的时候才会从服务器获取这个图像。也就是说，只有在media查询满足的时候才能获取到。<img>将确保<span>有正确的高宽比，这样<span>上的背景图像才能得到正确的现实。

下面是可以运行的所有代码。

首先看HTML。

复制代码

上一篇：CSS3网格的三个新特性详解

下一篇：纯CSS实现聊天框小尖角、气泡效果

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注