一个图片是通过百分比设置的宽度。如果想他是个正方形，宽和高一样怎么办呢

最新推荐文章于 2023-08-10 20:34:26 发布
最新推荐文章于 2023-08-10 20:34:26 发布
阅读量1.5k 收藏
点赞数
分类专栏： 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/78251583
版权

我们经常会遇到这种问题：图片是百分比设置的宽度，我们希望他是正方形宽高一样。那怎么办呢？？


首先把这个图片当做背景图片宽度是45%。那么高度height:0;padding-top:45%;这样就可以啦。背景图片，是个正方形。

肖肖肖丽珠
关注
专栏目录
为什么高度和宽度设置成一样的百分比，总是出不来应该有的效果？
IT修真院：初学者转行到互联网的聚集地
05-28 384
详细描述 为什么高度和宽度设置成一样的百分比，总是出不来应该有的效果，而使用padding-bottom就可以？ 截图 代码 .swag{ padding-left:31%; padding-bottom: 31%; margin:1%; border-radius: 20%; background: orange; float:left; } 深圳分院...
一个图片的宽度是以百分比设置的，那么高度如何设置才能让图片成为正方形？
Bernice97的博客
08-14 3102
把这个图片当做背景图片宽度是45%。那么高度height:0;padding-top:45%;这样就可以啦。背景图片，是个正方形。
改变图片的宽和高
fanday的专栏
04-18 537
自己想要实现的图片无损压缩实现不了（500W像素的图片，不知道为什么压缩后还是那么大），忽然看到windows画图中的改变图片的宽和高的功能，对呀，既然无损压缩做不了，那就改变一下图片的宽和高，简单的弄一下吧，损就损吧。 // 将要处理的图片读入 BufferedImage img = ImageIO.read(new File("D:\\Program Files\\myftp\\1....
当宽度为百分比时,如何让高度和宽度一样
李海江的博客
12-13 3530
当宽度为百分比时,如何让高度和宽度大小一样呢?.content li:before { content:""; display: inline-block; padding-bottom: 100%; }
用javasript判断一个图片的宽度，如果宽度小于一个数值，就以正常显示，大于就设置宽度width属性...
eason26_li的专栏
08-12 196
[code="java"] 调用：160?W/160:1;//得到缩放比例 var objname=""+srcobj.name srcobj.width=W/scale;//缩放宽度 srcobj.Height=H/scale;//缩放高度 ...
html怎么做一个正方形,纯 CSS 实现自适应正方形
weixin_29057163的博客
05-30 1261
在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面：那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢？方案一：CSS3 vw 单位CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width...
html在页面显示一个正方形,CSS实现一个自适应的正方形的方法示例
weixin_36051064的博客
05-30 3095
传统方法正方形用固定的形式写 直接长＝宽写固定的值如下.box{width: 200px;height: 200px;background: pink;color: #666;}但是很多情况下，在移动端的设计里，图片的宽度随着不同的移动设备进行改变的，这个时候就需要用到自适应的正方形的实现。下面介绍两种比较简单的实现方法：方法一：CSS3 vw 单位，vw是相对于视口的宽度。视口被均分为100单位...
CSS如何在宽高不确定的父元素内画一个正方形
webchang的博客
04-13 1742
使用CSS在宽高不确定的父元素内画一个正方形
图片百分比宽度随屏幕宽度自适应为正方形
weixin_41033048的博客
12-09 245
//html代码 <div class="module_comment_imgs"> <div class="module_comment_imgs_wrap"> <div class="module_comment_imgs_img"> <im
css实现容器(宽高不等的)内部自适应的正方形
codingWeb的博客
08-14 1706
先来看需求：容器(宽高不等的)内部自适应的正方形 方案一： 设置垂直方向的 padding 撑开容器 在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了： 代码如下： <!DOCTYPE html> <html lang="zh">
Cube.vue 三维立方体 vue 组件
04-30
一个vue组件 （**.vue）
CSS 把图片拉伸成正方型显示
hubert3的专栏
11-02 999
Html 或者 div style="background-image:url(http://5.su.bdimg.com/skin/3.jpg)"> Css .your-div {
css画正方形（百分比，非固定像素）
MR_SNAIL的博客
09-08 763
.box { background-color: #d1e2d5; border: 1px dashed #fff; margin: 2%; width: 20.8%; float: left; padding-top: 20.8%; height: 0; // position: relative; }
062：vue+openlayers绘制正方形、矩形、六芒星（ 代码示例 ）
大剑师兰特的GIS世界
08-16 1435
本示例的目的是介绍演示如何在vue+openlayers项目中使用draw的方式画矩形、正方形、六星芒。
vue之设置背景图片自适应屏幕
热门推荐
weixin_43984150的博客
05-23 1万+
需求说明 图片覆盖整个浏览器窗口 图片处于整个页面最底层 根据浏览器窗口的变化改变图片大小 不能使图片变形 图片始终在浏览器窗口的中心位置 适应web端和移动端 实现方法 参考许多文章后，发现最实用的布局是edge浏览器的新标签页的背景图片布局。 通过整合多方方案，得出最佳方案。 不论是使用图片标签引入图片还是块级标签添加背景图片，都可以通过此方法实现自适应。 //模板标签 <template> //外层盒子需要动态绑定宽高属性 <div class="register" :sty
Vue 大屏适配方案2 锁定宽高比
-
04-26 1552
创建一个外层包裹容器，，用该容器包裹所有的router-view,根据屏幕的可视区尺寸与设计稿尺寸得到一个宽高缩放比例，根据比例去对外层包裹容器进行缩放，以适应屏幕 包裹容器完整代码： <template> <div id="container" ref="wrapper"> <template v-if="show"> <slot></slot> </template>
vue实现5*5宫格当鼠标滑过选中的正方形背景颜色统一变色
最新发布
yangyanqin2545的博客
08-10 645
以上代码粘贴赋值即可使用。
Vue 不加载字体包 导致elementUI的icon显示为正方形小框框问题解决
wuyxinu的博客
06-08 6034
在一次开发任务中遭遇的一个问题 正常使用 element-ui的icon时 却发现不知道为什么显示都为正方形小框框于是，我就将element-ui 版本由 2.12.0 提升为 2.15.2 但是无法解决这个问题 失败Vue.config.js 配置问题 也就是 webpack的配置问题 通过将vue-cli预设配置弹出的操作，我查看了一下 Vue-cli 预设Webpack配置，和我自己的webpack配置，没看出问题来。感觉一切正常...
vue条件样式 设置背景为图片自适应大小
wnk1997的博客
08-30 3533
class前面加冒号，然后css分别写两种样式即可。
微信小程序怎么设置高度与宽度一样，宽度按百分比来
05-03
在微信小程序中，可以使用rpx单位来设置宽度按百分比来显示，rpx是微信小程序中的一个相对单位，可以根据屏幕宽度自适应调整大小。 具体实现方法如下： 1. 在wxml中设置view标签，设置class属性为square（或任意...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值