让image居中对齐,网页自适应
<div class="page4_content">
<div class="page4_box">
<div class="page_bg_16">
<img src="fuka.jpg">
</div>
</div>
</div>
.page4_content{width:100%; height:200px;}
.page4_content .page4_box {
width: 100%;
height: 100%;
left: 50%;
margin-left: -100%;
}
.page4_content .page4_box .page_bg_16{
display: block;
width: 200%;
height: 100%;
overflow: hidden;
position: absolute;
text-align: center;
}
.page4_content .page_bg_16 img, .page4_content .page_bg_4 img {
height: 100%;
display: inline-block;
width: auto;
margin: 0 auto;
text-align: center;
}
所遇到的问题:让图片像背景图片一样居中对齐。
思路:在img的外框的div上写200%;让image居中。然后针对image 的外框进行居中对其。
让图片根据高度自适应,宽度始终是居中的状态。宽度多余的部分隐藏
让image居中对齐,网页自适应的更多相关文章
- css3实现左右div高度自适应且内容居中对齐
主要运用了css3的弹层布局,直接上代码: 效果:左边盒子宽度固定.内容居中对齐.与右侧盒子高度相等,右侧自动缩放 html: <div class="main"> & ...
- flex 垂直居中、两列对齐、自适应宽
flex 垂直居中 <div id="parent"> <div id="child"> </div> </div&g ...
- C++ 画星号图形——空心三角形(星号居中对齐)(核心代码介绍)
//输出另外一种由星号组成的三角形(星号居中对齐) int a;//控制组成三角形的星号的行数 cout<<"请输入要组成三解形的星号的行数n(n>=2):\n" ...
- line-height,vertical-align及图片居中对齐问题根源解析
关于图片居中对齐的问题,进入前端行业虽然有一段时间了,以为自己懂了,可是实际上还是一知半解,找了一些博客来看了一下,但是感觉讲的有点碎,看完还是一知半解. 查阅了一下<css权威指南>,结 ...
- text-align:justify_内容居中对齐
一直发现text-align : justify这个对齐方式不好使,都不知道为什么么么哒: 因为两端对齐的这个行的结束要一个有空字符串或者别的不可见的字符,用户代理会把这个行的最后几个字符往右边拉,实 ...
- iOS的UILabel设置居上对齐,居中对齐,居下对齐
在iOS中默认的UILabel中的文字在竖直方向上只能居中对齐,博主参考国外网站,从UILabel继承了一个新类,实现了居上对齐,居中对齐,居下对齐.具体如下: // // myUILabel.h ...
- 利用CSS实现居中对齐
1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv"> 这里随 ...
- HTML4如何让一个DIV居中对齐?float输入日志标题
float:left,right clear:both 如何让一个DIV居中对齐? 第一步:设置外层的DIV的text-align:center; 第二步:设置里层的DIV的margin:auto 以 ...
- HTML学习笔记——各种居中对齐
0.前言 水平居中基本方法--指定块的宽度并设定块的左右外边距为auto,上下外边距可取0,那么该块能够在父元素中水平居中. 样式例如以下: 1:margin:0px auto 2:margi ...
随机推荐
- S: WARNING: Could not write to (C:\Users\Administrator\AppData\Local\apktool\framework), using C:\Users\ADMINI~1\AppData\Local\Temp\ instead...
使用ApkIDE反编译修改后,重新编译生成APK报错: > 正在编译Apk... - - 失败:S: WARNING: Could not write to (C:\Users\Administ ...
- Linux记录-limits.conf 配置
limits.conf 文件实际是 Linux PAM(插入式认证模块,Pluggable Authentication Modules)中 pam_limits.so 的配置文件,而且只针对于单个会 ...
- Flink FileSink 自定义输出路径——BucketingSink
今天看到有小伙伴在问,就想着自己实现一下. 问题: Flink FileSink根据输入数据指定输出位置,比如讲对应日期的数据输出到对应目录 输入数据: 20190716 输出到路径 20190716 ...
- IE11的变化 navigator.userAgent中不再包含“MSIE”关键字
IE升级了,让人好头疼,升级个东西,我们也要跟着升级,程序猿压力大呀.... 1.navigator.userAgent中不再包含“MSIE”关键字 2.用javascript的判断是否是IE11的方 ...
- LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖!
LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖! github:http://dtdxrk.github.io/LM-ReadImgMode/ TXT 1.全新的2.0版本,脱离 ...
- 第07组 Alpha冲刺(1/4)
队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:完成人员分配,初步学习Android开发 Github签入记录 接下来的计划:继续完成Android开发的学习,带领团队进行前后端开 ...
- eclipse的maven中需要把jar的包文件登入到自己的仓库里面的操作
问题的描述 从别人那拿到了Java maven的工程,导入自己的eclipse中之后编译的时候出现包文件找不到,之后把工程进行maven的update project之后,pom.xml文件出现错误, ...
- JDK线程池框架Executor源码阅读
Executor框架 Executor ExecutorService AbstractExecutorService ThreadPoolExecutor ThreadPoolExecutor继承A ...
- [转帖]TPC-C解析系列03_TPC-C基准测试之SQL优化
TPC-C解析系列03_TPC-C基准测试之SQL优化 http://www.itpub.net/2019/10/08/3330/ TPC-C是一个非常严苛的基准测试模型,考验的是一个完备的关系数据库 ...
- Spring Boot开启Druid数据库监控功能
Druid是一个关系型数据库连接池,它是阿里巴巴的一个开源项目.Druid支持所有JDBC兼容的数据库,包括Oracle.MySQL.Derby.PostgreSQL.SQL Server.H2等.D ...