正方形图片显示在长方形中，只显示中间部分 css

最新推荐文章于 2022-05-10 16:51:47 发布
最新推荐文章于 2022-05-10 16:51:47 发布
阅读量511 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44685781/article/details/115698333
版权
本文介绍了一个技术问题，即如何在一个固定宽高的矩形框内居中显示正方形图片而不变形。作者原本打算通过在图片上方和下方添加div来遮挡超出部分，但未能成功。后来，同事建议使用CSS的`background-position: 0 center;`属性，成功实现了图片的居中显示。这个技巧涉及到了CSS背景定位和图像裁剪的知识。
摘要由CSDN通过智能技术生成

先说下需求，一个固定宽高度的矩形框，现在有张正方形图片，想让正方形显示在矩形中间，不变形

本来准备正方形正常显示，上下放两个div盖住，只显示矩形框的内容，但是没实现，同事让我用background-position: 0 center; 一下子就好了

原图请忽视裁剪框
在这里插入图片描述
只显示中间的部分
在这里插入图片描述
新知识get, background-position: 定位背景图像

辣鸡王八鸭
关注
专栏目录
使用CSS让矩形图片只展示中间正方形区域且图片不变形（div/img两种标签）
艾欢欢的博客
02-08 1312
效果示意 CSS实现 使用 div 标签时，设置背景图，并设置 background-size: cover <!-- 标签 --> <div class="square"></div> <!-- 样式 --> <style> .square{ width: 80px; height: 80px; background: url("背景图地址") no-repeat; b
html在页面显示一个正方形,CSS实现一个自适应的正方形的方法示例
weixin_36051064的博客
05-30 3097
传统方法正方形用固定的形式写 直接长＝宽写固定的值如下.box{width: 200px;height: 200px;background: pink;color: #666;}但是很多情况下，在移动端的设计里，图片的宽度随着不同的移动设备进行改变的，这个时候就需要用到自适应的正方形的实现。下面介绍两种比较简单的实现方法：方法一：CSS3 vw 单位，vw是相对于视口的宽度。视口被均分为100单位...
正方形图形显示一半html,关于html：如何使用CSS对中和裁剪图像以始终显示为正方形？...
weixin_36087877的博客
05-31 557
我需要始终仅使用CSS将随机尺寸的图像裁剪为160x160的正方形。裁剪后图像应居中。我的标记应该是：在StackOverflow上搜索时，我找到了一些答案(例如CSS-如何将图像裁剪为正方形，如果已经是正方形，然后调整其大小)，但是在您的图像可以水平更大(宽)的情况下，它们不起作用 或垂直(高)。具体来说，我需要能够同时呈现两个宽幅图像：像这样的高个子形象：以正方形形式显示，而无需事先知道是水平...
图片很长，显示中间部分，自适应浏览器大小
qq_33472885的博客
09-06 761
<div className={styles.over}> <img src="......png" alt="" /> </div> .over{ overflow: hidden; img{ width: 100vw; height: 690px !impo...
css控制长方形图片在正方形区域显示，且不变形
weixin_34096182的博客
01-11 2112
2019独角兽企业重金招聘Python工程师标准>>> ...
使用CSS实现中间镂空的图片遮罩效果
09-24
主要介绍了使用CSS实现中间镂空的图片遮罩效果的方法,文中同时附带介绍了一个用CSS3实现的镂空一个圆形的代码示例,需要的朋友可以参考下
css圆形图片处理示例(方形图片变圆形图片)
09-25
如果图片不是正方形，或者图片的尺寸大于`div`的尺寸，图片的一部分将无法显示在圆形区域内。 此外，为了达到更加美观的视觉效果，我们也可以通过添加`background`属性来设置圆形图片的背景。通过`background-image...
使用CSS实现img标签图片自适应正方形
weixin_45395575的博客
03-20 3085
我人比较懒，下面代码是我想象出来的。相当于商品简易展示块。像这样： 代码如下： <a class="link"> <p class="pic"><img class="img" src="图片地址"></p> <p class="name">商品名称</p> <p class="info"> <...
CSS实现正方形
XIAOLONGJUANFENG的博客
01-26 2151
正方形 以前有人问我怎么实现一个正方形，我就很纳闷！把块属性width和height设置成一样不就好了吗！ //这不就是个正方形 .div { width:100px; height:100px } 但这不是他想要的答案。也许是考虑到自适应的问题吧。 于是，我想到了最近在b站Steven老师那看到他用过的vw vh单位 //vw单位把屏幕宽分为100(vh同理，高) .div { width:20vw height:20vw } 俺想，酱不就好了吗！ 再稍微对样式补充一下,看一下具体效果 &l
CSS中实现菱形图片
H&B Blog
07-06 5251
在视觉设计中，把图片裁切为菱形是一种常见的设计手法，但在 CSS 中还没有一种简单直观的方法来实现它。事实上，直到最近，这种效果才基 本成为可能。当网页设计师想要实现这种设计风格时，他们通常不希望在图 像处理软件中预先把图片裁好。显然不用说你也知道，这个方法的可维护性 并不好。如果未来有人想修改图片风格，将很难增加其他效果，而且最终往 往会搞得一团糟。 ...
css 剪辑图片_CSS clip:rect 矩形剪裁功能，截取图片某一块
weixin_34870633的博客
12-30 1422
CSS clip:rect 矩形剪裁功能，截取图片某一块2016-12-14 10:434715最近我在制作一款主题的时候，在自适应css设计中，为了调整图片大小，又不愿意改变图片比例的情况下，用到了CSS剪裁功能。说实话，这个功能在国内运用的比较少。CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上...
如何把一个图片不变形的放在更小的div中（适用于移动端）
wuqiongqiong_的博客
11-14 2739
html代码 div class="title-img"> img src="。。。" alt=""> div> css代码 .title-img{ width: 100%; height: 3.22rem; margin:0 auto; text-align:center; overflow:hidden; } .title-img
CSS（四）笔记
weixin_56577624的博客
02-13 1596
圆角边框、盒子阴影、浮动、定位、元素的显示与隐藏
CSS – 边框，只有边框的一半可见
weixin_49234845的博客
05-10 4844
效果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> #holder { border-left: 2px solid rgba(0, 187, 150, 100); height: 200px; width: 200px; posi.
css样式——图片居中在正方形中
happy921212的博客
09-03 838
近日做需求，有一个为了让图片显示好看的需求，就是占位的div是矩形的，里面图片要居中： <div style="border:1px solid #ddd;height:150px;width:150px; display: flex;justify-content: center;align-items: center; " > <img src="https://csdnimg.cn/cdn/content-toolbar/csdn-logo.png?v=202
CSS之固定大小的div中自动显示图片的中间部分
netuser1937的博客
02-09 8965
CSS之固定大小的div中自动显示图片的中间部分
html5 css3 将长方形图片 切成 直角梯形显示
热门推荐
snow_finland的专栏
09-30 1万+
效果图如上 skew test html,body,div,img{ margin:0; padding:0; } img{ border:0 none; } .pic1{ width:220px; height:300px; padding-left:180px; margin-left:-160px; float:left; transform:skew(-5
html5中正方形按钮,CSS实现矩形按钮右边缘的中间有个往里凹的小半圆
weixin_31787547的博客
05-30 461
test.btn {width: 100px;text-align: center;height: 50px;line-height: 50px;background: #000;color: #fff;position: relative;}.btn:after {position: absolute;content: '';width: 30px;height: 30px;background...
surfaceview camera 显示正方形图片
最新发布
01-10
要在SurfaceView上实现相机显示正方形图片，首先需要在布局文件中定义一个SurfaceView用来显示相机预览。然后在代码中需要使用Camera API来实现相机的打开、预览和拍照功能。 首先，需要获取Camera对象并设置相机预览显示的SurfaceHolder。接着，设置相机的参数，包括预览大小、对焦模式等。在SurfaceView的回调方法中，需要实现surfaceCreated()、surfaceChanged()和surfaceDestroyed()这几个方法，以便正确地管理相机的预览和释放资源。 一旦相机预览正常显示在SurfaceView上，接下来就是显示正方形图片的处理。需要在预览的每一帧画面中，根据实际的预览画面大小和图片大小，计算出正方形区域的位置和大小，然后将预览画面中的正方形区域截取出来并显示到SurfaceView上。 在截取正方形区域的过程中，需要注意处理预览画面和图片之间的比例关系，以保证截取出来的正方形图片在SurfaceView上能够正确显示。最后，需要在处理完整个预览画面后，释放资源并关闭相机。 总的来说，实现SurfaceView上显示相机预览并显示正方形图片的过程，涉及到相机的打开和设置参数、SurfaceView的管理和回调处理、正方形图片的截取和显示等多个方面的技术，并需要综合考虑预览画面大小、图片大小和显示逻辑等因素，才能正确地实现这一功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值