fullscreen图片全屏并保持宽高比例的背景图

最新推荐文章于 2023-03-14 16:58:02 发布
最新推荐文章于 2023-03-14 16:58:02 发布
阅读量330 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/u/164404/blog/210659
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

         您可否曾经想过在您的网站上有一副时常能填满屏幕而又能保持宽高比的背景图片呢？还有它必须是
居中的，而不是集中在图片左上角？此插件就能满足您的以上需求。你可以通过demo来查看，然后你可以发现它
能够在所有允许javascript运行的浏览器上完美的运行。当然IE浏览器的话是需要一些额外的代码，
在此我推荐unitpngfix去处理png图片的透明问题。




查看效果图


文章详情

转载于:https://my.oschina.net/u/164404/blog/210659

html中背景图片等比例缩放,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
weixin_32616031的博客
06-07 5924
该楼层疑似违规已被系统折叠隐藏此楼查看此楼随着逐浪CMS新版的一些效果逐渐放出，有不少的朋友想全屏的背景图片如何设计。在不同的时代有不同的流行网站显示形式，当前很流行的一种网页形式就是满屏大图，本文将用最简单的方式实现该效果。用到了CSS 属性background-size ,无需javascript。先看demo，打开后，调整浏览器窗口大小，观察背景图的变化。如果在你的项目中也需要这样的效果，...
全屏css,CSS之全屏背景图
weixin_36338765的博客
08-04 974
吐槽啦：Yeah 明天就是国庆了o(*￣▽￣*)o！哈哈，提前祝福各位园友国庆快乐、假期愉快、生活美满、天天开心！国庆我要回家一趟，把一些不用的东西带回家，走访一下亲朋好友，在家打几天酱油~~~言归正传，我们回到我们的主题来看看CSS之全屏背景图。Nowdays，满屏大图的网页成为了一种fashion，网页的模板、布局是用CSS、HTML……来设计的，这里就以CSS来聊全屏背景图。简单点，对于全...
javascript full screen 全屏显示页面元素的方法
10-26
要想让页面的某个元素全屏显示，就像在网页上看视频的时候，可以全屏观看一样，该怎么实现呢
前端可视化数据大屏（1）底部带源码地址
热门推荐
m0_58002043的博客
03-14 5万+
效果图技术架构：datav，vue2，echarts我们一步一步的来实现一个简单的可视化数据大屏，开始吧！！
fullscreen-jquery-plugin:它通过更改其高度和宽度将任何 HTML 元素设置为全屏。 它不会像其他 Layover、Modalbox 那样再次重新创建元素
06-06
Jquery 全屏插件 这是一个简单的 jQuery 插件，它通过更改其高度和宽度将任何 HTML 元素设置为全屏。 它不会像其他 Layover 那样再次重新创建元素，Modalbox 会这样做。 用法： $ ( '#fullscreen-link' ) . click ( function ( ) { $ ( '#iframe,#content-block' ) . FullScreen ( { // This option has to be implemented if 'title' is required on the header when fullscreen mode is on. title : function ( fullScreenElement ) { if ( ! fullScreenElement . parents (
浏览器全屏状态下背景颜色设置
qq_38519358的博客
07-16 2654
浏览器全屏状态下背景颜色设置： :-webkit-full-screen { background-color: @content-bg !important; } :-moz-full-screen { background-color: @content-bg !important; } :-ms-fullscreen { background...
CSS3全屏背景图片缩小渐变自动切换代码
06-11
在这个案例中，我们可能使用`cover`值，使图片自适应容器并保持宽高比，确保始终填充整个屏幕。 4. **动画和过渡**：CSS3的`@keyframes`规则用于定义动画的关键帧，`transition`属性则用于指定元素从一种样式过渡到...
jquery网页图片全屏背景效果实例源码
03-15
值得注意的是，`background-size: cover`属性使得图片能填满背景容器，而`background-position: center`确保图片居中显示，这样即使图片的原始比例与视口不匹配，也能保持良好的视觉效果。 此外，如果你的图片集合...
H5全屏鼠标移动图片视差预览特效
06-24
在现代网页设计中，视觉效果和用户体验是至关重要的元素，H5全屏鼠标移动图片视差预览特效正是为了提升这两方面而设计的一种创新技术。本文将深入探讨这个特效背后的关键知识点，包括HTML5的特性、鼠标事件处理、...
超好用的前端全屏插件：vue-fullscreen
全易
01-14 2097
官网：添加链接描述 安装 npm install vue-fullscreen 引入 import VueFullscreen from ‘vue-fullscreen’ Vue.use(VueFullscreen) 使用 <template> <fullscreen fullscreen-class="big-view bg-white" :page-only="true" :exit-on-click-wrapper="false" v-mo
requestFullScreen元素全屏显示
Honey_tianming的博客
11-15 1329
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&
html5全屏(Fullscreen)
学习记录
03-13 4706
&lt;div class="btn-fullscreen" @click="handleFullScreen"&gt; &lt;el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom"&gt;
screenfull_Vue使用screenfull实现全屏效果
weixin_29138993的博客
12-24 830
本文实例为大家分享了Vue使用screenfull实现全屏的具体代码，供大家参考，具体内容如下安装npm install --save screenfull在需要的页面引用import screenfull from 'screenfull'全屏使用全屏import screenfull from 'screenfull'export default{name: 'screenfull',data...
谷歌浏览器调用webkitRequestFullScreen方法后，设置的背景色只填充可视范围问题。
pgLi
06-07 1万+
1、问题根因    谷歌浏览器下默认对全屏设置的背景色是白色，而当前body是不设置高度的或者设置的是100%，导致背景色只对可视范围生效。2、解决思路    设置谷歌浏览器下，背景色，覆盖掉默认的颜色    //各个浏览器下 全屏状态下背景色设置 :-webkit-full-screen { background-color: @content-bg !important; } :-moz-...
vue中screenfull组件实现全屏和非全屏+怎么给页面全屏加一张图片且不需要设置js获取页面高度
lyclyc_的博客
06-23 1045
vue_screenfull实现全屏和非全屏和首页设置全屏图片
Fullscreen API：全屏操作
doi2746的博客
09-17 852
function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } el...
banner图片不拉伸、全屏宽、居中显示的方法
师远鹏
05-27 6410
做为一名混乱的JAVA人，虽然前端还是可以做，但是很多细节做的并不是那么好，记录一下一些经验 Title .bannerbox { width:100%; position:relative; overflow:hidden; height:200px;
图片地图和 CSS 精灵图
花铛
11-16 3158
图片地图允许在一个图片上关联多个 URL，目标 URL 的选择取决于用户单击了图片上的哪个位置。图片地图有两种类型：服务器端图片地图：将所有点击提交到同一个目标 URL，向其传递用户单击的 x、y 坐标。客户端图片地图：通过 HTML 的<map>标签来实现。<map>标签被用于定义客户端图片地图，即一个具有可点击区域的图片。<map>标签只是一个容器，其中包含一组<area>标签，正是这些<area>标签定义了图片地图里的可点击区域。name 属性是<map>
设置背景图片宽高
最新发布
03-12
<think>好的，我现在需要帮助用户解决在CSS中设置背景图片宽度和高度的疑问。首先，我要回忆相关的CSS属性，然后结合用户提供的引用内容，整理出清晰的步骤。 用户提到了几个引用，比如引用[2]和[4]提到使用padding-top和background-size来实现高度自适应，引用[1]展示了固定宽高的例子，而引用[5]则说明百分比的使用方法。我需要综合这些信息，给出不同的方法。 首先，明确背景图片的设置主要涉及background-size属性。常见的值有固定值（如300px 200px）、百分比（基于父元素）、contain和cover。另外，用户可能需要让高度自适应，这时候可以用padding技巧，比如设置padding-top为图片的宽高比百分比，这样高度会随宽度变化，保持比例。 接下来，我需要分情况说明：固定尺寸、百分比、自适应以及全屏覆盖。每个情况举例子，并指出注意事项，比如父容器需要有宽度，或者使用伪元素避免内容被挤压。 还要检查是否有错误，比如background-size的语法是否正确，是否覆盖了用户可能的需求。例如，用户可能希望图片不拉伸，或者完全覆盖容器，这时候需要提到cover和contain的区别。同时，要引用用户提供的参考资料来支持回答，比如引用[2]和[4]中的方法。 最后，生成相关问题，可能涉及其他背景属性或响应式设计，确保问题与主题相关，帮助用户进一步学习。</think>在CSS中设置背景图片的宽度和高度主要通过`background-size`属性实现，以下是具体方法和场景说明： ### 一、固定宽度/高度设置 ```css .element { background-image: url("image.jpg"); background-size: 300px 200px; /* 宽 高 */ width: 300px; /* 容器宽度需与背景图宽度匹配 */ } ``` 特点：直接指定像素值，图片可能被拉伸变形[^1] ### 二、百分比设置 ```css .element { background-image: url("image.jpg"); background-size: 100% auto; /* 宽度100%父容器，高度自动 */ } ``` 特性：宽度按父元素百分比缩放，高度自适应保持原比例[^5] ### 三、自适应高度设置 ```css .container { width: 100%; height: 0; padding-top: 56.25%; /* 16:9比例计算 (9/16=56.25%) */ background-image: url("image.jpg"); background-size: contain; } ``` 原理：通过`padding-top`创建高度空间，`background-size: contain`保持完整显示[^2][^4] ### 四、全屏覆盖设置 ```css body { background-image: url("fullscreen.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100vh; } ``` 特点：`cover`值确保图片始终覆盖整个容器，可能裁剪边缘[^5] ### 注意事项 1. 需要同时设置`background-repeat: no-repeat`避免平铺 2. 父容器必须定义明确尺寸（固定值或百分比） 3. 推荐使用伪元素设置背景避免内容挤压： ```css .element::before { content: ""; position: absolute; width: 100%; height: 100%; background-image: url("image.jpg"); background-size: cover; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值