【uniapp】长方形图片显示中间正方形部分不压缩图片（圆形展示）

实现思路

在使用 uni-app 框架的 uni-image 组件时，如果要将长方形图片显示为中间的正方形部分，可以使用 CSS 来实现裁剪效果。首先使用mode="widthFix"，让图片宽度等于盒子的宽度高度自适应。再将图片父盒子设置宽高以及使用overflow: hidden来达到超出部分不显示的目的。使用flex布局使得图片水平垂直居中。注意如果不使用绝对定位的话，超出高度的图片也有可能挤压别的盒子，导致其他元素错位。

具体代码

<view class="image-container"><uni-image src="your-image-url" mode="widthFix" class="my-img"></uni-image>
</view>

.image-container {width: 200px; /* 调整容器宽度适应需要 */height: 200px; /* 调整容器高度适应需要 */overflow: hidden;display: flex;justify-content: center;align-items: center;border-radius: 50%;position: relative; /*使用绝对定位来防止高度挤压别的盒子*/
}
.my-img {position: absolute;width: 100%;
}

实现效果如下

【uniapp】长方形图片显示中间正方形部分不压缩图片（圆形展示）相关推荐

服务器网页图片显示不了怎么办啊,网页图片显示不出来怎么办网络故障解决【详解】...
网页图片显示不出来怎么办? 文字与图片是构成一个网页的两个最基本的元素.你可以简单地理解为:文字,就是网页的内容.图片,就是网页的美观.除此之外,网页的元素还包括动画.音乐.程序等等. 有时候我们浏览 ...
如何压缩jpg图片的大小？可以一键压缩图片的软件有哪些？
其实不同的图片有不同的大小,甚至同一张图片有不同的格式.如果图片尺寸比较大,我们在使用的时候就会比较麻烦.因为现在一些网站对图片的大小有严格的限制,我们无法上传体积较大的图片,所以我们需要将较大的图片 ...
html插入图片出现红叉,网页图片显示红色叉怎么回事网页图片有些不显示的有效解决方法...
浏览各种网页是很多小伙伴们的日常,所以很多的网页知识都大概知道,当然也会遇到一些网页上的问题,比如说在浏览网页时图片全部不显示并且有红叉,相信大多数的朋友都会瞬间关闭然后打开另外一个页面,如果这张图片 ...
html图片在wps中不显示文字大小,WPS文字插入图片显示不全怎么办 WPS文字插入图片显示不完整的解决方法...
在wps文字编辑文档时,如果我们在使用时插入图片显示不全,这种情况我们该怎么解决呢?想必有不少的用户遇到过这种问题,下面教程之家网为大家带来WPS文字插入图片显示不完整的解决方法,不知道怎么解决的朋友 ...
word中图片为嵌入式格式时显示不全_word嵌入图片显示不全,教您word插入图片显示不全怎么办...
相信大家在使用Word进行编辑文档过程中,经常都会遇到需要插入图片情况吧.然后有些时候是不是还会遇到图片显示不全或只显示图片一部分的,或者只显示图片的边框之类的情况呢?所以今天小编将给讲讲word插入 ...
css让图片显示圆角纯CSS绘制漂亮的圆形图案效果
css让图片显示圆角样式: border-radius:5px 15px 20px 25px;顺序依次是上右下左纯CSS绘制漂亮的圆形图案效果 .circle { border-radius: 5 ...
图片太大怎么办？如何压缩图片大小，这一招很简单
压缩图片在我们的日常生活中运用的十分广泛,压缩图片的方法其实有很多种,不知道大家平时在上传图片的时候有没有遇到过像我一样的问题就是图片过大发送特别慢,甚至有些还发送不出去,这时候我们就需要将图片压缩变 ...
android设置图片亮度分10档,批处理图片同时调整图片亮度批处理图的大小压缩图片裁边（6页）-原创力文档...
使用Microsoft Office Picture Manager的最大好处是可以批处理文件:可同时处理一批图片的亮度.对比度.调整尺寸大小(压缩图片).旋转图片等,一气呵成. 批处理图片实例操作: ...
怎么压缩图片 ? 掌握这几种免费压缩图片的方法就够了
您需要了解图像大小调整和编辑的方法.您无需成为平面设计专家:调整图像大小和压缩照片是每个人都可以轻松学习的东西. 什么是照片压缩? 照片压缩或图像压缩是一种减少图像文件大小的过程,以便它在您的计算机中 ...

【uniapp】长方形图片显示中间正方形部分不压缩图片（圆形展示）

【uniapp】长方形图片显示中间正方形部分不压缩图片（圆形展示）相关推荐

最新文章

热门文章