css实现元素长或宽百分比设置且长宽相等

最新推荐文章于 2024-12-12 23:34:30 发布

原创最新推荐文章于 2024-12-12 23:34:30 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

😍😍😍前端三件套😍😍😍 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了如何使用百分比和padding解决正方形div在不同屏幕尺寸下宽度不一致的问题，通过设置height:0和padding-bottom实现自适应布局。

最近遇到个问题
就是 想使一个正方形div的长宽随屏幕变化 ，所以就想到了百分比，但使用百分比后长宽就有了偏差，所以经查阅资料，解决方法如下

div {
      width: 20%;
      height: 0;
      padding-bottom: 20%;
    }

用padding撑开盒子

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

z_yuyu

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

前端基础CSS+html篇 2w字吐血总结

chengxuyuanlee的博客

12-30

2373

前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。

前端高频面试题汇总(css,html)

每天都要努力学习哦~~

01-03

1705

H5 的新特性有哪些？C3 的新特性有哪些？ H5 新特性 1、拖拽释放(Drap and drop) API ondrop 2、自定义属性 data-id 3.语义化更好的内容标签(header,nav,footer ,aside, article, section) 4、音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay 5、画布 Canvas 6、地理(Geolocation) API 7. 本地离线存储 localSt

参与评论您还未登录，请先登录后发表或查看评论

html css设置宽高相等,通过 css 设置图片的高度与宽度相等_html/css_WEB-ITnose

weixin_35275073的博客

06-11

1238

分类：前端技术 | 标签：CSS | 发布时间：2016-01-11 13:30:00在图片长宽不相等的情况下，想将长宽设置为相等并且自适应屏幕，可以通过 js 的方式进行设置并通过监听 resize 来实时更新，但是这种方式很麻烦。这里通过 css 来达到我们想要的效果：HTML: 需要添加一个父元素来达到我们的目的。CSS: .box { position: rela...

css 高度和宽一样

风花一世月

01-20

285

.img{ width: 100%; height: 0; margin: 0 auto; padding-bottom: 100%; position: relative; img{ position: absolute; width: 100%; height: 100%; } }

css已知图片宽度，如何让宽高相等

宝贝QY的博客

06-04

2058

css已知图片宽度，如何让宽高相等

使用CSS让元素尺寸缩小时保持宽高比例一致

weixin_33965305的博客

08-29

778

CSS中有一个属性padding对元素宽度存在依存关系。如果一个元素的padding属性以百分比形式表示，padding 的大小是以该元素自身宽度为参照的。若想要元素尺寸变化时，宽高比例不变，可以将height 设为0，padding 撑开盒子高度，达到宽高比例不变的效果。代码如下： <!DOCTYPE html> <html> <head>...

Css样式实现元素宽度百分比，高度和宽度相等

weixin_40918145的博客

08-25

1265

移动端布局，在不知道宽高具体多少，只知道百分比的情况下，有时候需要几个元素平分屏幕宽度，但是又想让该元素的高度和宽度相等，那么可以采用以下方式： <div style="width: 100%;"> <div style="width: 25vw; height: 25vw;">test div</div> </div> ...

再不确定div大小得根据内容决定时如何保证div的长宽一致

最新发布

08-08

#### 使用 `padding` 技巧实现宽高一致在 CSS 中，`padding-top` 和 `padding-bottom` 的百分比值是基于其父元素的宽度进行计算的。因此，可以利用这一特性，通过设置 `height: 0` 和 `padding-top` 等于宽度的...

HTML&CSS学习笔记纯知识点版 (尚硅谷2019李立超版)

LiuKairui的博客

09-08

8156

此版为纯知识点无练习笔记版本目录1. HTML基础1.1 网页的结构1.2 HTML中的"实体"1.3 meta 标签1.4 语义化标签1.7 列表1.8 超链接1.9 图1.10 内联框架1.11 音视频2. CSS基础2.1 CSS简介2.2 CSS基本语法2.3 CSS 选择器基础2.4 CSS的复合选择器2.5 关系选择器2.6 属性选择器2.7 伪类选择器2.8 `a`元素的伪类选择器2.9 伪元素选择器2.10 样式的继承2.11 样式的冲突与优先级问题2.12 长度单位2.13 颜色单位3

作业（css）

cc4422bb的博客

12-12

447

media only screen and (min-width: 768px){ 表示是电脑并且最小宽度为768px。文字阴影：text-shadow:x轴偏移量(单位px) y轴偏移量(单位px) 虚化像素(单位px) 阴影颜色；2.p:nth-child(3){ } 表示选中p标签的父元素下的子元素，且第三个子元素为p标签。盒子阴影：box-shadow:x轴偏移量(单位px) y轴偏移量(单位px) 虚化像素(单位px) 阴影颜色；

【转】纯 CSS 实现高度与宽度成比例的效果

08-27

447

先来演示页面：Demo; 转的内容：最近在做一个产品列表页面，布局如右图所示。页面中有若干个 item，其中每个 item 都向左浮动，并包含在自适应浏览器窗口宽度的父元素中。 item 元素的 CSS 定义如下： .item { float: left; margin: 10px 2%; width: 21%; } 这时遇到...

css设置宽高等比设置和宽度一样的高度

lys20000913的博客

04-03

1017

css将高度设置为和宽度一样；

CSS保持div里面的图片宽高始终相等

qq_36124666的博客

05-26

937

<div class="img-box"> <img src="" alt="" /> </div> // css样式保持图片宽高始终一致设置 .img-box { position: relative; width: 100%; height: 0; padding-bottom: 100%; } .img-box img { position: absolute; top: 0; left: 0;.

当宽度不定时，如何设置div的宽高相同？

_Xiaoning_

08-01

5810

在做项目时，我经常会遇到这样一种情况：在一个div里渲染一个正方形或圆形的物体，这个物体是占满整个div的，而这个div的宽度会随着父元素的宽度变化而变化。为了让这个物体的效果不变形，必须保持div的长度和宽度一致，那么怎么做呢？保持div长宽相等的方法： div{ width: 100%; padding-top: 100%; //padding-bottom: ...

CSS中如何实现一个自适应正方形（宽高相等）的元素？

官方推荐

09-05

9987

CSS中如何实现一个自适应正方形（宽高相等）的元素？

css让多个盒子强制自动等宽

weixin_44383533的博客

08-31

1097

但是其中某一个内容较长的时候会破坏1:1:1的平衡我们通过阅读发现可以flex:1的同时增加width:100px;原理：所有孩子都是固定100px 剩下的都会等比分配过多或者过少的空间。

纯css实现长宽等比例的div

weixin_34194551的博客

03-06

520

现代网站页面基本都需要响应式，一个div的长宽往往我们都设置为百分之多少，这个百分之是相对于父容器动态计算的这样在浏览器宽度变化之后，我们的元素也能自动更新长宽。例如：我们在页面上摆了一个div，这个宽度设置为20%，同时又要求div始终保持4：3的长宽比来显示，因为这样看上去可能美观一点。很显然，不能因为宽度是20%了，把高度设置为15%，这是肯定错误的。通常想到的方法就是用js动态...

css如何使宽度和高度相等

weixin_39418338的博客

04-13

8362

例子：固定宽度，高度设置为0或者不写， padding-bottom的值为 50%样式如下: .inner { position: relative; width: 100%; height: 0;//可写可不写 padding-bottom: 50%;//必须是padding-bottom，padding-top不行 background: red; border: 1px solid black;

css 宽度高度等于宽度_CSS中的高度和宽度

cumtv80668的专栏

07-28

4194

css 宽度高度等于宽度The height and width properties allow you to set the height and width properties of an element. height和width属性使您可以设置元素的height和width属性。 Height and width properties are crucial for any we...

使用CSS实现元素右对齐的技巧

CSS（层叠样式表）提供了多种方法来实现这一效果，适用于不同类型的元素，如文本、链接、图像或自定义的导航菜单等。下面我们将探讨几种主要的右对齐方法。 1. 浮动定位： CSS的`float`属性可以用来实现元素的右...