让banner图片居中的方法

最新推荐文章于 2022-11-27 22:22:02 发布
最新推荐文章于 2022-11-27 22:22:02 发布
阅读量454 收藏
点赞数
原文链接：http://www.cnblogs.com/yimei/p/7527001.html
版权

有的时候，美工做一个图片，是做1920px宽的，但是我们的分辨率是1440px的，咋整呢？这个时候margin是解决不了问题的！

鸡汁如我，想到了这样一个被千千万万个人想到的好主意！那就是为banner加个class名字，然后里面加上img标签。

然后对于外面的banner div标签设置css：position:relative; left:50%; margin-left:-960px; width:1920px; 

这第二种方式就是直接给banner的div标签一个背景图，然后让背景图margin：0 auto；就完事儿了！是不是超级简单的？

 

转载于:https://www.cnblogs.com/yimei/p/7527001.html

weixin_30897233
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS banner图响应式居中显示的方法
12-29
属性能够将图片居中显示，但在窗口拉伸的过程中，图片往往很随着拉伸而变得惨不忍睹，所以我们可以将图片独立出来，并通过隐藏图片两侧的方式，来达到 banner 图在不同尺寸下居中显示的目的 HTML 结构如下 ...
jquery+干货不忽悠+很牛的全屏轮播大banner+图片居中+图片缓冲显示
07-11
本项目中的“jquery+干货不忽悠+很牛的全屏轮播大banner+图片居中+图片缓冲显示”是一个利用jQuery实现的高效、功能强大的全屏轮播效果。该轮播图具有以下核心知识点： 1. **全屏轮播**：全屏轮播（Full-Screen ...
pc的banner图居中显示
litCabbage的博客
04-09 405
确保pc中banner图居中显示 Git项目地址Git <div class="banner"> <img src="./banner33.jpg" alt=""> </div> .banner { position: relative; height: 615px; width: 100%...
大banner图居中显示的问题
yangtao123455的博客
01-07 2820
当我们页面的banner图十分的宽，而我们想要让图居中显示，并且超出浏览器的部分不会产生左右的滚动条，缩小页面的时候还能看见超出浏览器的部分的内容，直到显示完全。要想达到这种效果我们可以通过几段简单的css代码就能完成：img{ margin:0 calc(50% - 图片宽度一半); /*这里的calc()可能有兼容问题，可以加上webkit等前缀解决兼容问题；*/ } 还有就是我
H5全屏轮播图如何居中显示图片不拉伸
求知若渴，虚心若愚，努力前行，未来可期。
05-03 5199
遇到的问题 最近在做H5开发，遇到了问题，UI给了1920px*600px的图片，但是图片在不同的分辨率下尤其是小屏幕显示总会出现问题，图片被莫名的压缩了，为了解决这个问题，谷歌了好久找到了解决方案。解决方案 用div进行布局然后把图片设置为div的背景图 设置如下属性，让图片居中，不重复，宽度100%，这是固定高度，让它从两边切。 background: url(../banner.jpg
想要将banner图居中且图片不变形的话，需要如下写法
qq_58519519的博客
05-02 491
例如： .banner { width: 100%; height: 386px; background-color: pink; overflow: hidden; } .banner > img { position: relative; left: 50%; width: 1920px; height: 386px; overflow: hidden; margin-left: -960px; }
banner高度固定，宽度改变时图片居中显示效果实现
qq_44161722的博客
11-27 366
将父容器设置相对定位，再将图片本身先绝对定位，并向左偏移50%，再使用margin-left为负值的方式向右偏移图片自身宽度的一半，以达到绝对居中的效果。这样实现的效果，当逐渐缩小浏览器视图宽度时，图片的核心焦点区始终是在核心位置的。来源：https://blog.csdn.net/shipeng22022/article/details/72778030。使用swiper页面宽度缩放时，图片始终保持居中。
banner图片全屏效果.
08-12
- 图片居中：使用`background-position`属性，将其设为`center`，使图片在容器内水平垂直居中。 - 避免滚动：若图片高度超过视口，可使用`overflow: hidden;`隐藏溢出部分，以防止用户滚动。 3. **响应式设计**：...
样式齐全的banner图
11-25
6. **位置设置**：开发者可以自由调整Banner在屏幕中的位置，例如居中、左对齐或右对齐，适应不同布局的需求。 7. **事件监听**：提供了滑动事件监听接口，可以在图片切换时触发特定的操作，如跳转链接、播放音频等...
Android自定义封装banner组件
08-30
首先，让我们了解一下这个自定义Banner组件的基本功能： 1. **效果图预览**：组件展示了一个简洁的轮播图效果，用户可以清晰地看到图片或内容在屏幕上的滑动过渡。 2. **基本功能**：基于ViewPager的封装，支持...
banner图片不拉伸、全屏宽、居中显示的方法
师远鹏
05-27 6302
做为一名混乱的JAVA人，虽然前端还是可以做，但是很多细节做的并不是那么好，记录一下一些经验 Title .bannerbox { width:100%; position:relative; overflow:hidden; height:200px;
设置banner图片居中且有背景
周秦卿的博客
10-19 2289
分享一个设置banner图片居中布局的css小技巧.  放大缩小页面皆可居中页面对齐. 且可设置banner背景 代码如下: 居中布局 *{ /*先清除样式*/ margin: 0; padding: 0; } #box{ /*设置包着图片的盒子是宽100% 高是图片的高度 相对定位*/ width: 100%;
css记录background-size background-position 属性
u012857153的博客
03-29 1103
background-size background-position 属性
html主题居中,【html】banner图居中的两种方法
weixin_42310231的博客
05-31 686
【html】banner图居中的两种方法2年前 (2019-10-08) 作者:Jiaozn 分类:HTML 阅读次数:837评论(0)第一种方法:就是直接插入图片，给图片定义一个class，若是定义margin{0，auto;}的话，在浏览器中预览，缩放到50%，我们会发现将大banner图会在左边，是不会居中的哦！对于class的banner我们要经过如下定义{ positi...
超宽banner自适应居中
Cherry728的专栏
05-07 3200
样式： banner_box
如何让1920px的大图在1336px 的显示器中居中显示
韩盼盼的小窝
11-04 6185
之前用banner图做li的背景,达到图片居中显示的效果,但循环li时很难控制要显示的图片,下面这段代码可以在img 的src中控制要显示的图片,在banner 循环时也方便控制
关于banner图居中
liux6687的博客
04-30 472
  &lt;div class="main"&gt; &lt;ul&gt; &lt;li &gt;&lt;a href=""&gt;&lt;img src="img/main_a1 (4).jpg" alt="" title=""&gt;&lt;/a&gt;&lt;/li&gt; &amp
banner图在缩放屏幕的时候始终居中显示不变形
weixin_30472035的博客
11-01 716
大家在做项目的时候有没有遇到一个问题呢 就是一张图片宽度100% 在缩放屏幕的时候图片会被压缩变形！！！那么怎么才能实现图片始终居中而不被压缩变形呢？ 接下来让我带领大家解决这个问题 请看代码↓↓↓↓↓↓↓ 第一步：首先写出html的demo <div class='bannerbox'> <div class='banner'&gt...
banner html
最新发布
12-07
根据提供的引用内容，可以了解到制作网页中的banner图是一个重要的部分。下面是一个简单的HTML和CSS代码示例，可以用于制作一个基本的banner图： ```html <!DOCTYPE html> <html> <head> <title>Banner HTML Example</title> <style> .banner { width: 100%; height: 400px; background-image: url('banner.jpg'); background-size: cover; background-position: center; position: relative; } .banner h1 { color: #fff; font-size: 48px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } </style> </head> <body> <div class="banner"> <h1>Welcome to our website!</h1> </div> </body> </html> ``` 在上面的代码中，我们使用了一个div元素来包含整个banner图，并将其设置为100%的宽度和400px的高度。我们还使用了CSS的background-image属性来设置背景图片，并使用background-size和background-position属性来调整图片的大小和位置。我们还使用了position属性来设置元素的位置，并使用transform属性来使标题居中对齐。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值