自适应布局下的图片垂直水平居中，自适应手机横竖屏

最新推荐文章于 2024-06-13 19:04:45 发布
最新推荐文章于 2024-06-13 19:04:45 发布
阅读量4.8k 收藏 1
点赞数 1
分类专栏： Java-Web 文章标签： html 图片 布局 手机 自适应布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc_xss/article/details/73275238
版权
本文探讨了在响应式布局下如何实现图片在div中垂直水平居中，尤其针对手机横竖屏的自适应。通过特定的html结构和css样式设置，实现了在不同屏幕尺寸下图片都能保持居中显示。测试表明这种方法在手机浏览器上表现良好，能适应横屏和竖屏模式。
摘要由CSDN通过智能技术生成

在html中最常用的功能也是最常见的问题就是图片在div中垂直水平居中问题。
当然水平居中很好办了，div下text-align:center就搞定了，当然前提是图片没有绝对布局。
现在越来越讲究响应式布局，屏幕适配。要求图片的宽高未知，div为全屏大小，横竖屏适应居中
下面就说博主亲测有效的一个方法

html 结构

<div class= "img_frame" id ="img_frame">
    <div class= "center_tool"></div >
    <img class= "image_large" src ="test .jpg">
</div>

css 结构

最低0.47元/天 解锁文章
Kinney小黑
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
移动端 图片自适应
Knight7890的博客
06-20 2565
/*移动端图片自适应 精华 */ html lang="en"> head> meta charset="UTF-8"> title>图片自适应title> meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0, user-scalable=0,width=device-wi
如何让图片自适应不同屏幕宽度，并居中显示。
热门推荐
diligentkong的博客
07-07 6万+
我们在浏览网站的时候发现，很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分，这里我们介绍两种方式，第一种就是常见的方式，用定位我简单定义为三部曲： - 让包裹图片的盒子绝对定位， - left:50%, - Margin-left：图片宽度的一半 看例子吧：<!DOCTYPE html> <html lang="en"> <head>
css 图片自适应屏幕大小
最新发布
qq_33240556的博客
06-13 1654
通过使用max-widthobject-fit以及 Flexbox 等方法，你可以轻松实现图片自适应屏幕大小。这些方法可以单独使用，也可以结合使用，以满足不同的设计需求。
让元素自适应垂直居中
龐校長PAMPANG
01-13 455
方法有两个： 1、使用css3的新特性：flex;         display: -webkit-box;         display: -ms-flexbox;         display: -webkit-flex;         display: flex;         -webkit-box-pack: center;         -ms-flex-pa
自适应高度下垂直居中样式
baalhuo的博客
04-16 575
父元素设置 { display : table; } 子元素设置 { display: table-cell; vertical-align: middle; } 转自https://www.cnblogs.com/veeking/p/3936301.html
元素自适应水平垂直居中
weixin_33691817的博客
11-29 210
1、利用绝对定位和负边距 此方法需知道元素的宽度和高度。 首先将父元素设置为position:relative，子元素设置为position: absolute。 将子项top和left都设置为50%，位于父项的正中心。我们还需要将子项向上移动（高度的一半）向左移动（宽度的一半）因此，子项的中心才能位于父项的正中心。为此我们设置了负margin-top、负margin-left HTML <...
CSS 垂直居中、水平居中及流失布局宽高自适应
m0_67403013的博客
03-14 190
CSS 垂直居中、水平居中及流失布局宽高自适应，在工作中，经常遇到某个元素如何居中，因此介绍一种简单的居中方式。同时，也经常遇到，上到下布局，当顶部动态变化时，及高度不固定，但是底部如何动态铺满父元素高度，及100%；左到右布局，当左侧动态变化时，及宽度不固定，但是右侧如何动态铺满父元素宽度，及100%。 一、居中 1.垂直居中 仅需父容器添加样式 .parent { align-items:center; display: -webkit-flex; } 2.水平居中 仅需父容器添加样式 .pa
layer弹出层自适应高度,垂直水平居中的实现
10-16
`layer` 是一个常用的 JavaScript 弹窗插件，它提供了丰富的功能，包括弹出层的自适应高度和垂直水平居中。本文将详细讲解如何利用 `layer` 实现这些效果。 首先，我们来关注高度自适应的问题。在 `layer` 中，当弹...
css 水平居中，垂直居中，自适应宽度的代码
09-25
### CSS水平居中与垂直居中及自适应宽度详解 #### 一、宽度自适应的...综上所述，通过合理运用CSS的各种属性和布局技术，我们可以实现元素的水平居中、垂直居中以及自适应宽度，从而创造出更加灵活和美观的网页布局。
使用bootstrap的H5页面登录框自适应水平居中、垂直居中
07-18
在创建H5页面时，我们常常需要实现登录框等组件在不同屏幕尺寸下的自适应水平居中和垂直居中。在标题和描述中提到的问题，即在使用Bootstrap时，登录框无法自动在视觉中心对齐，这通常是因为Bootstrap的栅格系统和...
div自适应水平垂直居中的方法
06-05 565
1.Flexbox布局： display:flex; justify-content:center; align-items:center; width:100%; 2.Bootstrap栅格布局 一共12格，分成3块，每块占4列。居中的内容写在中间的那一块。 3.圣杯/双飞翼（水平自适应居中的基础上） 第一步：居中的div写在最前面，width:100%撑满一整行。三个div都向左浮动...
图片自适应手机横屏竖屏的宽高
cjchuchu1121的专栏
07-06 3161
由于某些原因，图片的宽度不能设置成自适应的，想要轮播图片自适应手机横屏竖屏，只能用js来控制图片的大小了。   &lt;div id="mgg" style="width: ${ width }px;"&gt; &lt;ul class="tag-pic" style="width: 100000px;"&gt; &lt;c:forEach var="ad&qu
html li ul 横排_css html 4图横向排列 自适应宽度，多图横向排列 li横向 li自适应...
weixin_42449548的博客
12-23 765
直接把苹果官网的抠出来给大家了，拿去happy吧!，先上效果图：横屏一排的效果：把浏览器拉小的效果：激动的代码来了：html>Apple(中国)-官方网站class="promopromo-holiday-music"href="/cn/shop/gifts/music"data-promo-id="holiday-music"data-analytics-click="prop3:...
css中图片在div垂直居中解决方案
black
08-21 138
&lt;html&gt;&lt;head&gt;&lt;style&gt;.box {/*非IE的主流浏览器识别的垂直居中的方法*/display: table-cell;vertical-align:middle;/*设置水平居中*/text-align:center;/* 针对IE的Hack */*display: block;*font-size: 175px;/*约为高度的0.873，20...
手机端垂直居中
shilianweiyao的专栏
03-24 1429
position: fixed;     left: 50%;     top: 50%;     -webkit-transform: translate(-50%,-50%);     -moz-transform: translate(-50%,-50%);     transform: translate(-50%,-50%);
页面div的垂直居中问题，以及自适应问题（手机端和PC端公用）
weixin_30632899的博客
07-04 635
用普通的方法，我们很难将div垂直居中，实现起来不仅有诸多限制，而且特别麻烦，我给大家介绍的是flex布局，只要给div加上以下样式： .vertical-container{ flex-wrap:wrap; -webkit-display:flex; display:flex; -webkit-align-it...
实现任意图片垂直居中的三种方法
11-03 1万+
在网站开发过程中，可能会有希望图片垂直居中的情况，而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。我总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一： 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的
手机端页面自适应解决方案
avgk01030117的博客
05-28 201
rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', ...
css 如何让div自适应屏幕水平垂直居中
05-23
可以使用以下 CSS 属性和值来让 div 自适应屏幕并水平垂直居中： ```css div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这里使用了 `position: absolute` 将 div ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值