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

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

效果示意

CSS实现

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

    <!-- 标签 -->
<div class="square"></div>
<!-- 样式 -->
最低0.47元/天 解锁文章
艾欢欢
关注
专栏目录
【HTML5】Web前端——网页实用技巧1：将一个方形图片，变成圆形（利用CSS属性）
王迪
12-10 9052
需要效果：将原本是长方形、正方形的图片，变成一个圆形图片 这样的好处：不需要对图片进行特别的处理，直接使用 实现思路： ①制作一个方形div盒子，将图片放在div盒子里 ②将盒子设置成圆形（利用 border-radius 属性） ③设置盒子的 overflow 属性值为 hidden 实现代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl..
cesium加载entity图片缩放_教你使用最简单粗暴的js方法实现图片最小边展示
weixin_39647734的博客
11-20 1007
实现图片的最小边展示，我们可以直接用background-size:cover;来解决，但是，background是毕竟不是img，如果想宽度固定，高度自适应还是比较难的，而直接用img，那么只能使用object-fit:cover;object-position:center;的方法，但是这种方法兼容性较差。所以，这里我们探讨一些其他的方法。我们可以让div套住img，通过div限制大小，通过获...
css控制长方形图片在正方形区域显示，且不变形
weixin_34096182的博客
01-11 2114
2019独角兽企业重金招聘Python工程师标准>>> ...
css 图片只显示中间部分 居中显示
sika-master的博客
03-03 5218
在项目中要做移动和pc端的适配，所以图片需要居中显示，不论窗口如何变化，始终显示中间部分的图片。 这个是图片在pc端，宽度为100%时显示的 如果图片宽度100%，放在移动端看，就会很小，显示的是一整张图片，不符合需求。经过css的设置，使得图片可以显示中间部分。 这个是图片在移动端显示。。能使图片在移动端显示图片的中间部分 思想： 第一种：采用图片在div盒子中，盒子宽度100%,给一个高度，让图片使用 相对定位+transform 移动。 第二种：使用图片做背景图片，使用背景图片的backgrou
正方形图片显示在长方形中，只显示中间部分 css
weixin_44685781的博客
04-14 517
先说下需求，一个固定宽高度的矩形框，现在有张正方形图片，想让正方形显示在矩形中间，不变形 本来准备正方形正常显示，上下放两个div盖住，只显示矩形框的内容，但是没实现，同事让我用background-position: 0 center; 一下子就好了 原图请忽视裁剪框 只显示中间的部分 新知识get, background-position: 定位背景图像 ...
css 图片 局部 清晰(矩形)
fx050622的专栏
12-23 299
[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 841
近日做需求，有一个为了让图片显示好看的需求，就是占位的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实现容器(宽高不等的)内部自适应的正方形
codingWeb的博客
08-14 1710
先来看需求：容器(宽高不等的)内部自适应的正方形 方案一： 设置垂直方向的 padding 撑开容器 在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了： 代码如下： <!DOCTYPE html> <html lang="zh">
使用HTML和CSS将文字环绕在图片上
X W F
05-25 1031
包裹文字意味着在图像周围调整/包裹文字。在HTML中，我们可以使图像在文本的右侧，左侧或中心对齐。 在CSS中，除了这些，我们还可以将图像插入圆形或矩形等中，并可以在其周围包裹文字。您还可以根据图像的形状使用CSS shape-outside属性。 以下示例说明了上述方法： 示例1：在此示例中，图像浮动在屏幕的右侧，文本包裹了图像。在此示例中，我们不需要shape-outside属性，因为形状图像是通常的（正方形）。 <!DOCTYPE html> <html> <head
CSS 实现切角效果
郊眠寺
05-24 2159
最近项目中看到这样的一个切角效果，如下所示 就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？ 一、自适应方式 这种布局一般有两种自适应方式，当然具体需要哪种可以根据实际设计师需求 1. 固定距离 无论宽高怎么变化，切角距离顶部的距离是固定的，如下 2. 固定角度 无论宽高怎么变化，切角与顶部的夹角是固定的，如下 下面具体来看这两种布局的实现 二、固定距离的切角 固定距离的比较好实现，只需要借助 clip-path就可以了。假设距离顶部的距离是20px，那么四个点
img固定长方形宽高为正方形不变形中心显示
weixin_42220130的博客
11-01 304
原图 使用css width: 150px;height: 150px; object-fit: cover;
CSS-图片显示固定大小不压缩、不变形
热门推荐
sunsineq的专栏
10-20 1万+
实现让长方形图片显示出正方形且不变形的效果的效果，一般可以有2种方式来实现，一种是设置为背景图，另一种是用img标签。 原图↓： 背景图↓： 一、背景图 首先，我们来看一下通过设置背景图的方式来实现我们的需求，主要通过background-size属性来设置我们的背景图缩放比例。 简单介绍一下background-size： background-size: contain; 自动调整缩放比例，保证图片始终 完整 的显示在背景区域，不裁剪图片 background...
html输出正方形,html-如何使用CSS对中和裁剪图像以始终显示为正方形？
weixin_42298760的博客
05-30 296
html-如何使用CSS对中和裁剪图像以始终显示为正方形？我需要始终仅使用CSS将随机大小的图像裁剪为160x160的正方形。裁剪后图像应居中。我的标记应该是： 在StackOverflow上搜索时，我找到了一些答案(例如CSS-如何将图像裁剪为正方形，如果已经是正方形，然后调整其大小)，但是在您的图像可以水平更大(宽)的情况下，它们不起作用 或垂直(高)。具体来说，我需要能够同时呈现两个宽幅...
图片始终以正方形显示的方法
chiwanzhu3140的博客
05-01 550
HTML结构： <div class="wrap"> <div class="div"> <img src="./imgs/WechatIMG27.jpeg"> </di...
CSS图片居中显示不变形，只显示中间部分，图片上的文字居中显示
weixin_43535265的博客
03-05 869
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ width:100px; height:100px; position:relative; top:100px; left:100px; background-image: url
css绘制梯形图形，及显示矩形图片
YouZi_X的博客
06-26 9644
梯形 div+transform实现如上效果，直接拉到底部。 -webkit-mask-image加上梯形遮罩也可实现。 1.使用border实现。 等腰梯形1.1 .trapezoid1-1 { width: 100px; height: 0; border-bottom: 100px solid black; border-right: 50px...
html把图片作为背景_CSS之图片特殊用法
weixin_39604897的博客
11-22 2508
前沿：说起image，大家肯定会想到的两个功能：1. 直接使用标签插入到html中；2. 作为背景图使用，那么还有没有什么其他的“骚操作”呢？一 图片的常规用途1 作为元素插入html中这是我们最常用的用途，语法也十分简单，如下：2 作为背景图background-image: url("图片地址")二 图片的特殊用途下面我们来重点说一说图片的特殊用途1 作为边框背景边框一般都使用纯色或者渐变色来...
html 图片正方形,关于CSS：如何使图像显示为正方形？
weixin_36280338的博客
05-30 1555
我最近一直在使用bootstrap 4 alpha版本来创建项目，经过大量尝试，当显示它们时，我无法使上传的不同大小的图像显示为正方形。还记得Instagram如何仅显示方形图像作为缩略图吗？我想实现这一目标。我进行了一些研究，并尝试了其他人写下的一堆东西，但是唯一可以做到这一点的是：https://stackoverflow.com/a/23518465/1067213但是结果不是我真正想要的：...
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
ldl_xz的专栏
03-31 376
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
两种CSS方法实现图片垂直居中：div+绝对定位与自动居中
总结起来，这两种方法都可以实现图片的垂直居中，第一种方法通过CSS布局模拟表格单元格，适合需要兼容性较好的场景；而第二种方法则利用了CSS的现代特性，简洁易懂，但在某些低版本浏览器中可能不完全有效。在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值