css object-fit实现图片居中垂直对齐不超过，不隐藏，等比缩放(实用)

最新推荐文章于 2023-10-24 07:45:49 发布
最新推荐文章于 2023-10-24 07:45:49 发布
阅读量748 收藏
点赞数 1
分类专栏： 前端 移动端 H5 文章标签： 图片等比缩放 图片居中垂直对齐 图片超过自动缩放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42861240/article/details/90899782
版权

效果图
在这里插入图片描述
1、首先写下html

	<div class="CardNoBox">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559715393055&di=f746e03b7251ef347f7f785e8ccb9538&imgtype=0&src=http%3A%2F%2Fyanshi.sucaihuo.com%2Fmodals%2F15%2F1546%2Fbig.jpg" alt="" id="CardNoImgZ" class="CardNoImg">
	</div>
	<div class="CardNoBox">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559715431715&di=1aedbcc43a6b37ae5b4b82d7c8d7faa3&imgtype=0&src=http%3A%2F%2Fwww.51cto.com%2Ffiles%2Fuploadimg%2F20120514%2F1452480.jpg" alt="" id="CardNoImgZ" class="CardNoImg">
	</div>

2、

最低0.47元/天 解锁文章
葉幺
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现元素水平垂直居中的4种方法
青衫客~的博客
09-30 4179
引 元素的垂直水平居中在网页开发中极为常见，其实现方法也多种多样，接下来将介绍4种实现元素垂直水平居中的方法。实现效果如图： <body> <div class="father"> <div class="son"></div> </div> </body> 一、 使用弹性盒模型flex实现 设置父元素的布局方式为flex， display: flex; 设置父元素在水平方向上的对齐方式为居中对齐，j
分享一个css3新属性object-fit（图片上下左右垂直居中占满父容器显示）
Rit3971054的博客
03-27 1092
在做项目的过程中，我们经常会遇到图片需要占满父容器的情况，可是图片完全拉伸占满父容器要么就变形了，要么就会留下空白，这样不美观，尽管图片可以做成背景等比例占满容器并且居中，但是那不是最完美的解决方案。 今天推荐一个css3新属性object-fit 这是原始图片，就是需要放进盒子里面的图片 object-fit有如下几个属性 fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content...
CSS 中实现文字和图片的垂直居中
YKPkaiping的专栏
08-25 1275
1. 使用 Flexbox 布局.container使用 Flexbox 布局，并通过实现垂直居中。则实现水平居中。你可以根据需要调整.container的高度。
前端布局之——水平垂直居中
YaoDeBiAn的博客
09-17 1353
前端垂直居中布局 前端页面的居中是平常开发中比较常见的布局，以下将从水平居中、垂直居中、水平垂直居中三个角度分析不同的布局方法。 水平居中 法一：行内元素水平居中 html: <div class="container"> <div class="box"></div> </div> css: .container { text-align...
css--vertical-align属性--图片文字居中对齐、图片底部空白缝隙
cmy741741的博客
06-15 1471
vertical-align 属性设置元素的垂直对齐方式。 从上面的例子中我们可以看到，当图片的 vertical-align 的值是 baseline 时图片和图片之间有缝隙，这是为了给文字留位置，就算没有文字因为基线对齐是默认值，缝隙也存在。解决方法：1.给图片添加 vertical-align 除默认值以外的值。 2.将图片转换为块级元素...
CSS实现等比例缩放：object-fit 的使用
qq_53985958的博客
06-20 3622
CSS实现等比例缩放：object-fit 的使用
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
09-24
CSS3的`object-fit`属性是一个非常实用的工具，它允许开发者精确地控制图片、视频等内联内容在容器中的适应方式。这个属性解决了以往通过调整宽度和高度、使用`background-size`等方法来实现图片适配的问题，使得...
一行css代码解决图片统一大小后的拉伸问题(object-fit)
09-22
总结来说，`object-fit`是CSS中一个非常实用的属性，尤其在处理需要统一尺寸的图片时，可以有效地避免图片被拉伸或失真。通过合理选择`object-fit`的值，我们可以灵活地控制图片在不同尺寸容器中的展示方式，从而...
浅谈CSS中的 object-fit 与 object-position的使用
09-27
在CSS布局中，`object-fit`和`object-position`是两个非常重要的属性，它们主要用于处理替换元素（如图片、视频）在容器内的适应方式和位置调整。这两个属性可以帮助开发者更好地控制元素的显示效果，特别是在响应式...
当鼠标经过显示隐藏层asp环境源码
03-31
鼠标经过显示隐藏层 鼠标经过显示隐藏层asp环境源码
CSS line-height行高上下居中垂直居中样式属性
12-08
在网页设计中，`line-height` 是一个非常重要的CSS样式属性，用于控制元素内部文本行之间的垂直间距，它可以帮助实现文字和图片的上下居中，以及单行或多行文本的垂直布局。`line-height` 的值可以是绝对长度单位...
CSS-防止图片挤压变形- object-fit、object-position属性
m0_53206841的博客
06-13 2712
我们在上传图片时，由于图片尺寸与我们所设置的尺寸比例不一致，会出现图片被挤压变形的现象。在此介绍一下CSS属性object-fit和object-position，以此完美解决此问题的发生。object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。对图片进行剪切，保留原始比例： 注：如果您还想切换被替换元素的内容对象在元素框内的对齐方式。可以通过使用 object-position
object-fit 切换被替换元素的内容对象在元素框内的对齐方式。
qq_29954811的博客
04-22 235
https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
实现图片自适应居中的一些方法，以及完美解决方法———object-fit
qq_43682422的博客
09-26 1344
可以看到我们需要明确的知道图片的宽高才能应用不同的样式，除非图片是1:1的正方形，否则必然会出现是宽度自适应还是高度自适应的问题。/* 高度100%，宽度自适应，原图是宽度小于高度，所以宽度不设置用来自适应。*如果是宽度大于高度，则宽度100%，高度不设置用来自适应。/* 高度100%，宽度自适应，原图是宽度小于高度，所以宽度不设置用来自适应。*如果是宽度大于高度，则宽度100%，高度不设置用来自适应。*千万不能都宽高都设置100%，否则图片会被拉伸变形！/* 宽度和高度务必都要设置成100%*/
图片居中方法，object-fit与object-position
IamTZz的专栏
09-03 1543
参考资料：https://www.qianduan.net/object-fit-object-position/ 参考资料：http://www.w3cplus.com/css3/css3-object-fit-and-object-position-properties.html 总结如下: object-fit有五种属性：fill、cover、contain、n
让图片完美适应：掌握 CSS 的object-fit与object-position
最新发布
粉丝们务必加入微信粉丝群
10-24 4798
在CSS中，我们可以使用 background-size 和background-position属性为背景图像设置大小和位置。而 object-fit 和 object-position 属性则允许我们对嵌入的图像（以及其他替代元素，如视频）做类似的操作。在本文中，我们将深入探讨如何使用 object-fit 将图像适应到特定的空间中，以及如何使用 object-position 在该空间中进行...
object-fit: 炒鸡方便的图片居中方法
09-28 167
今天在项目中遇到图片居中的问题，嗯，之前也有写过解决这个问题的文章，有n种方法。不过今天要说一个新的方案：object-fit，嗯，这个才是真的方便的方案啊。 先看预览： object-fit只能用于『可替换元素』(replaced element) 。所谓可替换元素，是指元素的内容和表现不是由CSS控制的，独立渲染的外部元素，比如：img、object、vide...
图片自适应等比缩放之object-fit
mengmeng12138的博客
11-07 289
图片自适应等比缩放之object-fit 图片自适应等比缩放之object-fitobject-fit：指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。与我们熟悉的background-size属性有点相似。 contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。 cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以
css object-fit
03-02
CSS object-fit是一个CSS属性，它允许您指定在元素的内容框中如何放置替换元素，例如图像或视频。object-fit有几个可选值，例如contain、cover、fill、scale-down和none。contain值将缩放图像，以便它完全适合元素的内容框，同时保持其纵横比。cover值将缩放图像，以便其完全覆盖元素的内容框，同时保持其纵横比。fill值将拉伸图像，以填充元素的内容框。scale-down值将缩小图像，以适应元素的内容框，如果它比contain还要小，则使用contain。none值将使图像保持其原始大小，而不会调整其大小或位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值