纯CSS（无 JavaScript）实现的响应式图像显示-白红宇

纯CSS（无 JavaScript）实现的响应式图像显示

阅读量：5462 次

发布时间：2019-06-16

本文共 1294 字，大约阅读时间需要 4 分钟。

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

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

　　它是如何工作的呢？

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

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

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

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

　　代码展示

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

　　HTML

　　首先看HTML。

                         
<
span
class
=
"magik-responsive-image"
id
=
"image-01"
>
<
img
src
=
""
alt
=
"TODO"
>
<
style
scoped>
@media screen and (min-width: 701px){#image-01{background-image:url();}}
</
style
>
</
span
>
        
      

　　CSS 我们还需要对CSS最一点修改，以便在应当显示高清图像的时候隐藏低清晰度的图像。技巧是增加backgroud-size:100%;这使得在维护高宽比不变的情况下伸展背景。

                         
.magik-responsive-image { 
background-repeat
: 
no-repeat
;
background-
size
: 
100%
;
display
: 
block
;
position
: 
relative
;
}
.magik-responsive-image img { 
max-width
: 
100%
;
}
@media 
screen
and (
min-width
: 
701px
) { 
.magik-responsive-image img{ 
opacity: 
0
;
}
}
        
      

　　好处

没有JavaScript

实现起来简单

还可用于视频（我将在以后的博客文章中发表有关这方面的内容）

　　缺点

在桌面环境下，需要向服务器发送两个请求

<style>标签的scoped睡醒在主要的浏览器里仍然没有得到支持。正是由于这个原因，我们才需要增加一个id，不过在后端代码中增加这通常不是问题。

　　演示

　　看看。

　　原文地址：

转载于:https://www.cnblogs.com/ranzige/p/3637731.html

你可能感兴趣的文章

drf 访问文档出现错误'AutoSchema' object has no attribute 'get_link'