使用CSS让矩形图片只展示中间正方形区域且图片不变形（div/img两种标签）

最新推荐文章于 2024-05-20 16:38:01 发布
最新推荐文章于 2024-05-20 16:38:01 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AiHuanhuan110/article/details/113755726
版权
本文介绍了如何使用CSS实现矩形图片只显示中间的正方形区域，保持图片不变形。通过设置div背景图或img的object-fit属性，可以达到预期效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果示意

CSS实现

  1. 使用 div 标签时，设置背景图，并设置 background-size: cover

    <!-- 标签 -->
<div class="square"></div>
<!-- 样式 -->
最低0.47元/天 解锁文章
【HTML5】Web前端——网页实用技巧1：将一个方形图片，变成圆形（利用CSS属性）
王迪
12-10 9310
需要效果：将原本是长方形、正方形的图片，变成一个圆形图片 这样的好处：不需要对图片进行特别的处理，直接使用 实现思路： ①制作一个方形div盒子，将图片放在div盒子里 ②将盒子设置成圆形（利用 border-radius 属性） ③设置盒子的 overflow 属性值为 hidden 实现代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl..
css实现容器(宽高不等的)内部自适应的正方形
codingWeb的博客
08-14 1788
先来看需求：容器(宽高不等的)内部自适应的正方形 方案一： 设置垂直方向的 padding 撑开容器 在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了： 代码如下： <!DOCTYPE html> <html lang="zh">
css控制长方形图片在正方形区域显示，且不变形
weixin_34096182的博客
01-11 2156
2019独角兽企业重金招聘Python工程师标准>>> ...
css 图片只显示中间部分 居中显示
sika-master的博客
03-03 5564
在项目中要做移动和pc端的适配，所以图片需要居中显示，不论窗口如何变化，始终显示中间部分的图片。 这个是图片在pc端，宽度为100%时显示的 如果图片宽度100%，放在移动端看，就会很小，显示的是一整张图片，不符合需求。经过css的设置，使得图片可以显示中间部分。 这个是图片在移动端显示。。能使图片在移动端显示图片的中间部分 思想： 第一种：采用图片在div盒子中，盒子宽度100%,给一个高度，让图片使用 相对定位+transform 移动。 第二种：使用图片做背景图片，使用背景图片的backgrou
正方形图片显示在长方形中，只显示中间部分 css
weixin_44685781的博客
04-14 598
先说下需求，一个固定宽高度的矩形框，现在有张正方形图片，想让正方形显示在矩形中间，不变形 本来准备正方形正常显示，上下放两个div盖住，只显示矩形框的内容，但是没实现，同事让我用background-position: 0 center; 一下子就好了 原图请忽视裁剪框 只显示中间的部分 新知识get, background-position: 定位背景图像 ...
css 图片 局部 清晰(矩形)
fx050622的专栏
12-23 329
[code="java"] Insert title here function mouseOverHandler(evt) { var thumb = document.getElementById("thumb"); var thumbWidth = thumb.clientWidth; var thumbHeight = thumb.clientHei...
css样式——图片居中在正方形中
happy921212的博客
09-03 898
近日做需求，有一个为了让图片显示好看的需求，就是占位的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
flex布局多张图片均分且中间有距离_Grid 网格布局
weixin_30351503的博客
02-03 1425
网页布局的前身今世 近年来，网页布局逐渐趋于统一化。从最初使用position+display+float来实现，到后来bootstrap3提出的栅格化布局，再到如今大厂经常考的Flex布局，每次改进的出发点都是如何减少布局时的工作量。但每一代都有自己的重大缺陷传统布局BootStrap3BootStarp4Flex相当精确，但工作量太大选择单位时，跨设备和缩放无法适应而选取百分比又不是...
前端使用cropperjs 裁剪正方形图片 设置头像（其实什么样比例的矩形图都行）以下代码兼容vue3和vue3+uniapp
qq_45503103的博客
05-20 820
就是长这样的参数给组件（blob:http://localhost:5173/f65e1c04-218a-49c0-b63f-edd0cf1cbb34）//cropperObj.afterImg为base64格式 按需转化为 file 格式。// 使用Blob对象创建一个新的文件对象。//是否允许通过拖动来调整裁剪框的大小。// 将base64的数据部分提取出来。//是否允许通过拖动来移动裁剪框。//是否允许通过拖动来缩放图片。// 创建一个虚拟的文件对象。//把裁剪的图片返回到父组件。
使用HTML和CSS将文字环绕在图片上
X W F
05-25 1115
包裹文字意味着在图像周围调整/包裹文字。在HTML中，我们可以使图像在文本的右侧，左侧或中心对齐。 在CSS中，除了这些，我们还可以将图像插入圆形或矩形等中，并可以在其周围包裹文字。您还可以根据图像的形状使用CSS shape-outside属性。 以下示例说明了上述方法： 示例1：在此示例中，图像浮动在屏幕的右侧，文本包裹了图像。在此示例中，我们不需要shape-outside属性，因为形状图像是通常的（正方形）。 <!DOCTYPE html> <html> <head
img固定长方形宽高为正方形不变形中心显示
weixin_42220130的博客
11-01 345
原图 使用css width: 150px;height: 150px; object-fit: cover;
CSS-图片显示固定大小不压缩、不变形
sunsineq的专栏
10-20 1万+
实现让长方形图片显示出正方形且不变形的效果的效果，一般可以有2种方式来实现，一种是设置为背景图，另一种是用img标签。 原图↓： 背景图↓： 一、背景图 首先，我们来看一下通过设置背景图的方式来实现我们的需求，主要通过background-size属性来设置我们的背景图缩放比例。 简单介绍一下background-size： background-size: contain; 自动调整缩放比例，保证图片始终 完整 的显示在背景区域，不裁剪图片 background...
img标签只显示图片中间区域
优快云LiYH的博客
03-18 1万+
cover:让图片填充满父节点，超出部分隐藏，仅显示中间，这才是我们想要的效果。 contain:让图片根据父节点宽高等比例缩放。
html输出正方形,html-如何使用CSS对中和裁剪图像以始终显示为正方形？
weixin_42298760的博客
05-30 329
html-如何使用CSS对中和裁剪图像以始终显示为正方形？我需要始终仅使用CSS将随机大小的图像裁剪为160x160的正方形。裁剪后图像应居中。我的标记应该是： 在StackOverflow上搜索时，我找到了一些答案(例如CSS-如何将图像裁剪为正方形，如果已经是正方形，然后调整其大小)，但是在您的图像可以水平更大(宽)的情况下，它们不起作用 或垂直(高)。具体来说，我需要能够同时呈现两个宽幅...
图片始终以正方形显示的方法
chiwanzhu3140的博客
05-01 600
HTML结构： <div class="wrap"> <div class="div"> <img src="./imgs/WechatIMG27.jpeg"> </di...
使用CSS实现img标签图片自适应正方形
weixin_45395575的博客
03-20 3176
我人比较懒，下面代码是我想象出来的。相当于商品简易展示块。像这样： 代码如下： <a class="link"> <p class="pic"><img class="img" src="图片地址"></p> <p class="name">商品名称</p> <p class="info"> <...
css来控制img正方形自适应
热门推荐
董庆贺的专栏
10-11 1万+
css来控制div正方形自适应<div class="wrap"> <div class="div"> <img src=""> </div> </div>.div{ width:100%; height:0px; padding-bottom:100%; position:relative; } .div img{ w
html 图片正方形,html – 如何“裁剪”矩形图像到CSS的正方形？
weixin_36060412的博客
05-30 413
假设他们不必在IMG标签…HTML：CSS：.thumb1 {background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */width: 250px;height: 250px;}.thumb:hover { YOUR HOVER STYLES HERE }编辑：如果div需要链接的地方只是调整HTML...
【CSS】如何将图片放值在容器中间，垂直居中
朱砂绛的博客
08-05 3633
必须给容器（父元素）加上text-align:center； 必须给当前元素转成行内块元素（display:inline-block；）再给当前元素加上vertical-align:middle； 在当前元素的后面（没有回车）加上同级元素span； 并对span进行 vertical-align:middle；width：0；height：100%；display:inline-block等设置...
html css图片裁剪
最新发布
12-30
如果不需要实际加载 `<img>` 标签而只是作为装饰用途，则可以直接把图片设为某个 div 的背景，并调整它的大小位置来进行裁剪操作。 ```html <div class="bg-crop"></div> ``` ```css .bg-crop { background-image...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值