使背景图片不缩放水平居中样式

最新推荐文章于 2022-09-23 11:57:29 发布
最新推荐文章于 2022-09-23 11:57:29 发布
阅读量2.2k 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/samete/article/details/50944591
版权 
#help-banner {
	position:relative;
	overflow: hidden;
	background-image: url(../../../img/front/frontHome/help/banner.png);
	height: 255px;
    <span style="white-space:pre">	</span>background-position-x: 50%;
}
samete
关注
专栏目录
html中背景图片等比例缩放,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
weixin_32616031的博客
06-07 5722
该楼层疑似违规已被系统折叠隐藏此楼查看此楼随着逐浪CMS新版的一些效果逐渐放出，有不少的朋友想全屏的背景图片如何设计。在不同的时代有不同的流行网站显示形式，当前很流行的一种网页形式就是满屏大图，本文将用最简单的方式实现该效果。用到了CSS 属性background-size ,无需javascript。先看demo，打开后，调整浏览器窗口大小，观察背景图的变化。如果在你的项目中也需要这样的效果，...
html5设置图片居中自适应,HTML5 图片宽高自适应，居中裁剪不失真
weixin_39663970的博客
06-04 2282
一，使用 JS，先上效果图，右图为定死宽高的效果，左图为处理之后的1， 主要思路是，在图片 onload 后，将图片的宽高比和 div 容器的宽高比进行比较，2， 从而确定拉伸或者压缩之后是宽还是高不足以填充容器3，将不足以填充容器的方向设置为和容器一致4，此时，图片的另一个方向可能超出容器，此时只要将图片做反方向的偏移，使其居中5，容器定义超出部分不显示，以下是结合 Vue 的一个例子图片居中#...
CSS实现背景图尺寸不随浏览器缩放而变化的两种方法
12-13
一些网站的首页背景图尺寸不随浏览器缩放而变化，例如百度个人版的首页，缩放后背景图的尺寸并不改变：  再比如花瓣网( huaban.com )：   现在用CSS来实现这一效果。 首先需要一张足够大尺寸的图片，上图百度背景图的尺寸为1600*1000px( 图片地址：http://4.su.bdimg.com/skin/12.jpg?2 )；花瓣背景图的尺寸为1600*1600px( 图片地址：http://hbfile.b0.upaiyun.com/img/unauth_page/food_bg.jpg )； 然后有两种方法可以达到背景图不缩放的效果： 方法一. 把图片作为backg
CSS实现背景图尺寸不随浏览器缩放而变化
静如雪的博客
01-27 3897
方法一. 把图片作为background，方法二使用img标签。同时要有一张足够大尺寸的图片。 方法一. 把图片作为background 有几个CSS的属性要提一下：background-size：cover，这个CSS3的属性作用是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中，如果不使用这个属性，在IE11和FireFox中缩放浏览器，背景图片会随之缩小，同时使用-webkit-background-size: cover和-o-backgrou.
三行代码实现在网页中添加背景且居中填充不拉伸
sayhitoloverOvO的博客
09-03 876
代码位置 添加背景需要写在专门的css文件中或者在网页文件的html标签中新建style标签里： <html><style>配置语句</style></html> 了解background属性： background属性是一个简写属性，专门设置背景的属性，可以设置背景色，也可以设置背景图片。 下面看看background可以设置的属性： background-color： 规定要使用的背景颜色。 background-position： 规定背景
页面背景图尺寸不随浏览器缩放而变化
北辰
10-08 4551
应用前提：当我们为某一个元素设置了背景图以后，希望该背景图不会因为浏览器的放大而放大或者随着浏览器的缩小而缩小 方法一：把图片作为背景图片（background） background-size：cover，这个CSS3的属性作用是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中，如果不使用这个属性，在IE11和FireFox中缩放浏览器，背...
autoScale:图片自动缩放平铺居中插件
07-07
3. **图片居中**：在HTML和CSS中，可以通过设置`margin: auto`或者使用Flexbox或Grid布局来实现元素的水平居中。这个插件可能利用了这些技术来确保图片在缩放后仍然居中。 4. **图片平铺**：平铺是指让图片在容器内...
css3实现背景图片拉伸效果像桌面壁纸一样
09-25
CSS3为Web开发者提供了许多强大的样式控制功能，其中`background-size`属性是一个重要的属性，它能够决定如何调整背景图片的尺寸。通过该属性，我们可以实现一个像桌面壁纸一样拉伸的效果，使得背景图片能够覆盖整个...
VMiddleImg图片居中裁切效果
04-28
CSS的`background-size`属性可以用来控制背景图片的大小和裁剪方式，例如`cover`值可以使图片填充整个容器并保持宽高比，超出部分会被裁剪。对于内联图片，可以使用`object-fit`属性，其提供了多种裁剪模式，包括`...
修改背景图片居中并自适应宽度的css
younger_z的专栏
02-17 5556
BODY {background-image: URL(photo/picture1.jpg);background-position: center;background-repeat: no-repeat;background-attachment: fixed;}-->
小程序image图片自适应，不压缩，不变形，原图填充
Zan_Z的博客
09-23 9757
宽设100%，使用mode属性下的widthfix。小程序使用 rpx也可以自适应。做背景图，给div设置固定高度。不保持纵横比缩放图片。完整的将图片显示出来。
如何让css背景图片占满全部背景，并且随着浏览器缩放图片保持长宽不变呢？
热门推荐
QC班长的博客
06-02 5万+
style> .body{ background-image: url('${basepath}/resource/images/loginb1.jpeg'); background-size: 100%; background-repeat:no-repeat; } style> css代码添加背景图片常用代码　　1 背景颜色 {
关于background-image调整大小和位置的方法笔记
weixin_30599769的博客
12-01 2011
遇到background-image的问题有点多，直接上网搜资料自己整理一下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ...
wap手机端background不让背景图片自动放大
美奇软件开发工作室
11-18 497
前言： wap手机端为了实现自适应，会添加让页面自动缩放的代码，如下： <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 那么问题来了，当我们设置全局页面背景图片时，会发现背景图片也被放大...
html img和背景图处理图片不拉伸_解决background图片拉伸问题
weixin_36444911的博客
12-23 2321
ImageView中XML属性src和background的区别：background会根据ImageView组件给定的长宽进行拉伸，而src就存放的是原图的大小，不会进行拉伸。src是图片内容(前景)，bg是背景，可以同时使用。此外：scaleType只对src起作用；bg可设置透明度，比如在ImageButton中就可以用Android:scaleType控制图片的缩放方式如上所述，backg...
background背景图同比缩放铺满整个页面方法的时候碰到的问题
无缺的博客
05-30 1万+
做了那么多的静态页，没想到还是碰到了一个让我懵B的问题，问题：    我这里用了background-size:cover；背景图同比缩放铺满这个页面之后，如果拉伸屏幕，会发现如下图    尴尬，里面的内容还是原来的位置，但是图片同比缩放这样设置肯定是不行的，解决代码如下：    这个问题可能不算什么技术难点，不过遇到了解决了，就记录下来...
背景图页面缩小会变形_css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化...
weixin_39616416的博客
12-20 2046
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽)重复展示(用无数张同样的图片来铺满容器的背景面积)x轴 /y轴 重复展示(纵向拉伸不重复 / 横向拉伸不重复 )background-repeat 这个货看下它的值:repeat默认。背景图像将在垂直方向和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背...
css background一行代码实现背景图片自适应视口并且不拉伸
七十多岁的人了、
03-04 5145
css background 小技巧
html背景图片等比例缩放
最新发布
06-13
要让HTML页面中的背景图片等比例缩放，可以使用CSS3中的background-size属性。具体的实现方法如下所示： 1. 在CSS中设置背景图片样式： ```css body { background-image: url("your-image-url.jpg"); background-repeat: no-repeat; background-size: cover; } ``` 2. 使用background-size:cover属性，让背景图片完全覆盖整个页面，并保持其宽高比例不变。这样可以确保无论屏幕大小如何，背景图片都能够呈现出最佳的显示效果。 另外，如果你想让背景图片在页面中居中显示，可以使用background-position:center属性。例如： ```css body { background-image: url("your-image-url.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } ``` 这样就可以让背景图片在页面中垂直水平居中显示，同时保持其等比例缩放的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值