重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS怎么实现响应式图像显示

这篇文章主要介绍“CSS怎么实现响应式图像显示”,在日常操作中,相信很多人在CSS怎么实现响应式图像显示问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS怎么实现响应式图像显示”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联于2013年创立,是专业互联网技术服务公司,拥有项目成都网站建设、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元惠安做网站,已为上家服务,为惠安各地企业和个人服务,联系电话:18980820575

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

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

它是如何工作的呢?

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

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

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

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

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

首先看HTML。

代码如下:


span class="magik-responsive-image" id="image-01">
TODO


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
实现起来简单
还可用于视频(我将在以后的博客文章中发表有关这方面的内容)

缺点

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