CSS图片按比例居中在div内显示(非填充模式)

最新推荐文章于 2021-08-03 21:29:25 发布
最新推荐文章于 2021-08-03 21:29:25 发布
阅读量682 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34580627/article/details/114941107
版权
本文介绍了两种方法使CSS图片在div内居中显示，包括仅使用div背景图片和包含img标签的情况，适用于不同宽高比例的图片，并提供了相关代码示例。
摘要由CSDN通过智能技术生成

第一种情况只有子元素一个div,通过设置divbackground-image: url();即可居中显示,适用于仅div显示背景图片
代码结构 ↴ ↴ ↴
在这里插入图片描述
宽度小于高度(高度优先占完空间) ↴
在这里插入图片描述
宽度大于高度(宽度优先占完空间) ↴
在这里插入图片描述

第二种是需要在div下面显示一个img标签, 使得img内的图片可以居中显示,见图
代码结构 ↴ ↴ ↴
在这里插入图片描述
宽度小于高度(高度优先占完空间) ↴
在这里插入图片描述
宽度大于高度(宽度优先占完空间) ↴
在这里插入图片描述
最低0.47元/天 解锁文章
大大毛丶aj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html div背景自动居中显示,网站背景图居中自适应以及拉伸填充CSS代码解决方法...
weixin_32029321的博客
05-31 1015
写这篇水文呢，也是最近在自己在魔改一个主题用作新做的班级网站。发现模版的背景图片以及其他地方的图片显示只能在电脑端看到，而在移动端不能够自适应。顺便也整理出来。首先是图片的居中自适应：需要先给CSS background-repeat 属性赋值no-repeat，使图片不重复只显示一张。然后再定位背景图像位置，给CSS background-position 属性赋值center，设置水平和垂直都...
CSS图片按比例居中在div内显示
最新发布
zihang_cheng的博客
12-09 395
CSS图片按比例居中在div内显示
图片上下居中对齐 按比例
vimanas的博客
05-14 896
function imgLoad(obj, width, height) {   //定义要限制的图片宽高,这个宽高要同style里面定义的相同，小于限定高宽的图片不操作   var image = $(obj);   if (image.width() > width) {   image.height(width / image.width()
div + css 让img标签图片在div中等比缩放显示
weixin_30699443的博客
05-30 1720
html部分： <div class="imgDiv"> 　　<img src="" > </div> css部分： .imgDiv { 　　width: 100px; 　　height: 100px; } img { 　　width: auto; 　　height: auto; 　　max-width: 100%; 　　max-hei...
css img等比例缩放并且图片水平垂直居中展示
weixin_44658916的博客
05-20 2860
css img等比例缩放并且图片水平垂直居中展示 父元素 div{ width: 400px; height: 400px; position: relative;/* 使用定位实现水平垂直居中 */ } 按父容器宽度自动缩放，并且保持图片原本的长宽比 img{ width: auto; height: auto; max-width: 100%; max-height: 100%; /* 向父元素定位 */ position: ab
img图片在div中垂直居中 + 剪切 + 等比例缩放
David_jiahuan的博客
06-20 1808
外层div，内层img，如何让img在div内水平垂直居中展示呢？ 上面已经实现了图片在div中水平垂直居中展示了，那下面就是如何隐藏掉图片超出div的部分：
DIV+CSS上下左右绝对居中
06-12
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
CSS实现DIV居中的三种方法
09-27
在CSS布局中，让一个元素在容器中居中是一项常见的需求。本文将详细介绍三种方法来实现`div`的居中对齐，适用于不同场景和需求。 ### 方法一：使用margin自动填充 这种方法适用于当外层`div`（`.div1`）的尺寸已知...
CSS设置DIV垂直居中的N种方法 兼容IE浏览器
09-27
本文将详细介绍如何在兼容IE浏览器的情况下，使用CSS实现DIV元素的垂直居中。首先，我们需要明确一点，CSS中的`vertical-align`属性主要用于表格单元格（如`<td>`）和其他内联元素的垂直对齐，而不是用于块级元素如`...
css 图片水平居中+自动等比例缩放
weixin_30794851的博客
10-26 492
这个CSS代码实现了让图片在DIV中水平居中，并且自动缩放至在CSS中指定的大小。 CSS这样写： content img{max-width: 678px!important;height: auto!important;width:expression(this.width > 678 ? "678px" :true)!important;-webkit-max-width:678p...
css -- img图片等比例缩放,且水平居中显示
King Saj
04-30 930
<div class="guild_img_box"> <img src="图片地址" alt=""> </div> /* img 外侧盒子 */ .guild_img_box{ position: relative; width: 80px; height: 80px; border-radius: 50%; margin: 0 auto; display: block; ...
图片居中等比缩放且填充div
有问题 ! 请留言 !
11-29 3887
图片居中等比缩放且填充div 因为经常会有这种需求，需要等比将图片缩放并填充满整个div的需求，但是前端本身图片并没有这种属性设置，所以要进行特别处理 这种图片的展示方式再ios中叫Aspect fit，在安卓中叫 crop center 都是可以直接设置的，而再css里只能用特殊处理 一般情况我们展示图片的时候，如果需要将图片设置一定比例的展示，可能会用div包裹，然后将图片设置最大宽度...
如何使用CSS实现图片和div的等比例缩放
JulyNight的博客
09-10 1万+
首先，这里采用CSS3的方式，先设置父div的宽高，在对其中的img标签设置缩放比例。 下面是Div代码 <div class = "FuD"> <img src = "图片路径" class = "img"/> </div> 下面是CSS代码 .FuD{ width:500px; height:550px .img{ -ms-transform: scale(0.5); //缩放比例0.5 -webkit-transform: scale(0.
html 设置图片显示比例,css巧妙设置等比例图片显示
weixin_39623411的博客
06-04 3020
比如我们经常会用到5:3,4:3等图片比例作为缩略图那么在列表显示的时候，如何保持这个比例，很简单，我们首先把3/5=0.6,那么比例就是0.6.比例500:300image.png alt="">Web前端开发之html5/css3/jquery #11 ...
css3 背景等比例,纯 CSS，不用背景，实现图片等比例展示
weixin_33349121的博客
08-03 634
最简单的等比例：divimg{max-width:100%;max-height:100%;}如上显示效果是：图片等比例缩放，不变形；图片所有区域都会显示。但是，如上代码有可能会造成横向、纵向白边，当我们在做图片列表时，这会看起来有点乱，于是我们改进了下，保证横向没有白边，高度不足时上下留白，高度超出时隐藏图的上下：div{display:flex;align-items:cent...
CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）
liudanyang_21的博客
08-26 642
目的是：通过background的一系列属性，让DIV按照背景图片的比例缩放，并让背景图片填充整个DIV首先我们需要让背景图片在指定的DIV中全部填充显示之前看有用类似 background-attachment: 的fix来实现背景图片的填充，但是，貌似是不能按照当前的DIV大小去填充。我的情况是，宽度按照整个屏幕的百分比来调整，但是高度，又不能通过整个屏幕的高度百分比来调整，而也想通过宽度的百分比，即宽高比希望与背景图片的宽高比相等。通过一下属性，先填充background-size: 100...
html图片等比例拉伸,CSS控制图片等比例缩放
weixin_39827775的博客
06-04 1361
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示，下面我来介绍利用css控制图片比例缩放与javascript实现的方法，有需要了解的朋友可参考参考。按比例缩小或者放大到某个尺寸，对于标准浏览器(如Firefox)，或者最新都IE7浏览器，直接使用max-width,max-height；或者min-width,min-height的CSS属性即可。如： 代码如下 复制代码img{m...
如何让一个行内元素（如一张图片）在div中居中
热门推荐
adobe1992
09-15 2万+
（1）第一种：用vertical-align div class="method1"> span class="tiptop">span> img class="test" src="img/Dota2.jpg" alt="dota2"> div> style> .method1{ text-align:center; } /*vertical-align:middle 是依赖
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值