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

最新推荐文章于 2022-05-10 16:51:47 发布
最新推荐文章于 2022-05-10 16:51:47 发布
阅读量461 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44685781/article/details/115698333
版权

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

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

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

辣鸡王八鸭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 剪辑图片_CSS clip:rect 矩形剪裁功能，截取图片某一块
weixin_34870633的博客
12-30 1372
CSS clip:rect 矩形剪裁功能，截取图片某一块2016-12-14 10:434715最近我在制作一款主题的时候，在自适应css设计中，为了调整图片大小，又不愿意改变图片比例的情况下，用到了CSS剪裁功能。说实话，这个功能在国内运用的比较少。CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上...
使用CSS实现中间镂空的图片遮罩效果
09-24
主要介绍了使用CSS实现中间镂空的图片遮罩效果的方法,文中同时附带介绍了一个用CSS3实现的镂空一个圆形的代码示例,需要的朋友可以参考下
正方形图形显示一半html,关于html：如何使用CSS对中和裁剪图像以始终显示为正方形？...
weixin_36087877的博客
05-31 526
我需要始终仅使用CSS将随机尺寸的图像裁剪为160x160的正方形。裁剪后图像应居中。我的标记应该是：在StackOverflow上搜索时，我找到了一些答案(例如CSS-如何将图像裁剪为正方形，如果已经是正方形，然后调整其大小)，但是在您的图像可以水平更大(宽)的情况下，它们不起作用 或垂直(高)。具体来说，我需要能够同时呈现两个宽幅图像：像这样的高个子形象：以正方形形式显示，而无需事先知道是水平...
图片很长，显示中间部分，自适应浏览器大小
qq_33472885的博客
09-06 730
<div className={styles.over}> <img src="......png" alt="" /> </div> .over{ overflow: hidden; img{ width: 100vw; height: 690px !impo...
css控制长方形图片在正方形区域显示，且不变形
weixin_34096182的博客
01-11 2096
2019独角兽企业重金招聘Python工程师标准>>> ...
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
01-19
　原本不是圆形图片，通过CSS样式布局实现成圆形图片，首先图片必须为正方形。 　二、使用布局技术 　使用CSS3 圆角技术实现。 　使用CSS3样式单词：border-radius 　语法： 　div{border-radius:5px} 　对图片设置...
css图片垂直居中 css中如何实现图片垂直居中
12-13
在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的...
应用帧布局管理器居中显示层叠的正方形
最新发布
01-13
在上面的代码中，我们使用了三个 TextView 控件来实现居中的显示层叠的正方形。每个 TextView 控件都设置了不同的背景颜色和文字颜色，以示范不同的层叠效果。 * android:layout_gravity="center"：用于设置控件在 ...
CSS设置未知大小图片在已知大小容器水平垂直居中
01-19
复制代码代码如下: <!...未知大小图片在已知大小容器水平/垂直居中</title> <style type=”text/css”> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; ve
实现矩形某个位置高亮显示在界面效果
04-01
该源码实现一款矩形某个位置高亮显示在界面效果，并且还可以自定义所在高亮矩形的位置和大小范围，经常使用在应用引导时的使用，是一个不错的ios学习的例子，喜欢的朋友可以下载学习看看，。
CSS（四）笔记
weixin_56577624的博客
02-13 1552
圆角边框、盒子阴影、浮动、定位、元素的显示与隐藏
CSS – 边框，只有边框的一半可见
weixin_49234845的博客
05-10 4501
效果 代码 <!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-图片显示固定大小不压缩、不变形
热门推荐
sunsineq的专栏
10-20 1万+
实现让长方形图片显示出正方形且不变形的效果的效果，一般可以有2种方式来实现，一种是设置为背景图，另一种是用img标签。 原图↓： 背景图↓： 一、背景图 首先，我们来看一下通过设置背景图的方式来实现我们的需求，主要通过background-size属性来设置我们的背景图缩放比例。 简单介绍一下background-size： background-size: contain; 自动调整缩放比例，保证图片始终 完整 的显示在背景区域，不裁剪图片 background...
使用CSS让矩形图片只展示中间正方形区域且图片不变形（div/img两种标签）
艾欢欢的博客
02-08 1283
效果示意 CSS实现 使用 div 标签时，设置背景图，并设置 background-size: cover <!-- 标签 --> <div class="square"></div> <!-- 样式 --> <style> .square{ width: 80px; height: 80px; background: url("背景图地址") no-repeat; b
微信小程序图片等比缩放和展示中间部分image的mode属性
glorious_future的博客
04-27 2497
有发现我写得页面，带有图片的几乎都是外面套一层，然后把里面得image拉满，不知道大家是怎么写得，兴许是我太菜了，只会这么写，反正就是很难看就对了 这样的话，宽高不一定合适，就可能会造成被压扁的情况，不太友好 但之前一直写管理系统大表单什么的，也没咋注意过美观不美观，这个事儿一直就没有发现，直到现在开始写电商小程序了，这件事儿逐渐暴露了出来[苦涩] 为了美观，想办法改改我一贯的写图片得方式吧 设计要求：单张图时显示等比缩小的图片，多张图时截取图片一部分显示 首先，只有一张图片的时候的等比缩放 //.
html中img图片截取显示中间部分
棉花没有糖的博客
04-24 9022
由于需求要求图片居中显示，同时要有图片加载错误的处理，所以排除了css的background-position方法 html代码： <img src="' + cover + '" onerror="this.src=assets/pro-ping.png;" onload=imgOnload(this) /> js代码： function imgOnload(e) { conso...
html 图片正方形,关于CSS：如何使图像显示为正方形？
weixin_36280338的博客
05-30 1514
我最近一直在使用bootstrap 4 alpha版本来创建项目，经过大量尝试，当显示它们时，我无法使上传的不同大小的图像显示为正方形。还记得Instagram如何仅显示方形图像作为缩略图吗？我想实现这一目标。我进行了一些研究，并尝试了其他人写下的一堆东西，但是唯一可以做到这一点的是：https://stackoverflow.com/a/23518465/1067213但是结果不是我真正想要的：...
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、付费专栏及课程。

余额充值