css中按比例展示宽高

最新推荐文章于 2024-07-29 18:03:30 发布
最新推荐文章于 2024-07-29 18:03:30 发布
阅读量914 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RELY_ON_YOURSELF/article/details/95874977
版权

需求：当宽度固定时，想让高度是宽度的一定比例。
将height设置为0，padding-bottom设置为比例数。

.test{
  background : #25a4bb
  overflow : hidden
  width : 100%
  height : 0
  padding-bottom : 10%
}
Y X L
关注
专栏目录
css 宽高等比例设置
这是我的博客
07-30 3881
往往在处理自适应的图片在渲染为正方形的时候：第一种想法就是把图片裁剪成宽高比例1:1的图形；第二种方式我们使用js去控制图片img父盒子div的高度去和宽度相等（以上方式就比较繁琐了）；第三种使用简单的css去控制。下面就说下第三种方式啦！ html格局为： <div class="box"> <img src="图片路径" alt=""> </div> css布局： .box{ width: 40%; // 父盒子的宽度%，自适应 看实际情况去设置百分比
css实现固定宽高比例的div
MMMMQI的博客
04-25 3068
使用padding实现 这个方法的原理是，padding和margin的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。 利用这个原理，可以通过设置padding-top / padding-bottom的百分比值，获得固定宽高比例的元素。 固定宽高的元素是画出来了，但是具体使用的时候还要往里面添加子元素，需要让子元素绝对定位，占满空间。 使用的例子如下 <style> .wrap { width: 200px; } .box { background-co
css元素固定宽高比例
weixin_52923266的博客
01-31 1493
现在大部分浏览器都已经支持aspect-ratio方法了,所以大胆使用.
【CSS】css 如何实现固定宽高比
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-29 1033
总结起来，使用属性是实现固定宽高比的现代方法，因为它直接控制元素的宽高比，不受元素宽度的影响。而技巧则是一种兼容性更好的解决方案，适用于那些不支持属性的旧浏览器。
CSS之宽高比例布局
weixin_34381687的博客
04-08 845
在某些特定的场景中，如视频播放、可视化图表占位等一些高宽需要固定的比例。如果占位区间是由固定值确定，那么我们皆大欢喜，但在目前的的应用发展中宽高自适应的方式才能满足我们的需求，那么我们该如何这种自适应的宽高比布局呢？ 什么是宽高比？ 宽高比也称纵横比，元素的纵横比描述了其宽度和高度之间的比例关系。两种常见的视频宽高比为4：3和16：9。要保持div的宽高比，通过为padding-top/paddi...
css按照宽高比例写
qq_38402659的博客
02-26 472
overflow: hidden; height: 0; padding-bottom: 20%; width: 100%
css宽高比例
lvlemo的博客
10-13 868
css 宽度100%,控制宽高比例10:7.自适应app屏幕 .divtest{ position: relative; width: 100%; height: 0; padding-top: 70%; transform-o
css实现一个元素高度固定宽度按比例显示效果
09-22
在CSS布局设计中，有时我们需要实现一个元素的高度固定，而宽度按照特定的比例自动调整，以保持内容的纵横比。这通常适用于图像、视频等需要保持原始比例显示的媒体元素。在给定的示例中，目标是使一个包含视频的`...
CSS实现图片等比例缩小不变形的实例代码
09-22
在网页设计中，保持图片等比例缩放是非常重要的，因为这可以确保图片在不同尺寸的屏幕上展示时不会失真或变形。CSS（层叠样式表）提供了多种方法来实现这一目标。本文将深入探讨如何使用CSS来实现图片等比例缩小...
面试官提问之CSS如何实现固定宽高比
11-21
在CSS中实现固定宽高比是一项常见的前端技术挑战，尤其在设计响应式布局时更为重要。面试中，面试官可能会提出这样的问题来测试你对CSS布局的理解和灵活性。本篇文章将详细探讨如何在不同场景下实现固定宽高比。 ...
CSS实现的图片宽高自适应固定边框
09-25
图片宽高自适应固定边框是网页设计中常见的需求，主要是为了确保图片在不同屏幕分辨率下，都能很好地展示在用户眼中，同时保持边框的固定样式。 传统上，实现图片自适应容器的常用方法包括JavaScript或者HTML/CSS的...
div+css常用资料
RainyLin-SunnyLin的专栏
08-26 1514
页面上所有图片自动缩放的代码QUOTE:var imgObj;for(i = 0; i {if(document.all(i).tagName.toLowerCase()=="img"){imgObj = document.all(i) //建议只判断高度或者宽度其中一个，那样可以自动按比例缩放if (imgObj.height>500) //判断图片的高度，如果大于500，则设置为500
css实现宽高比
Honeymao的博客
09-07 5324
头条一面就死在了这个问题上，于是在此好好研究一下。 要求：实现一个div,宽度是body的一半，宽高比满足4：3方法一： 　　利用将padding-top或padding-bottom设置成百分比，来实现高度满足宽度的某个比例。因为，当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！。采用这种方法，需要把
css高度根据宽度自适应显示，按比例显示宽高
海贼王某人的博客
05-31 2966
在项目中，我们经常遇到这样的需求，高度或者宽度需要按照比例显示，这时候就可以使用aspect-ratio属性解决问题，也可以使用padding-top: 解决 // padding-top .container { width: 100%; padding-top: 50%; } // aspect-ratio 例：宽100，高50 .container { width: 100%; aspect-ratio: 2 / 1; } .container { height: 100%;
css 设置宽高比例的方式
文杰的博客
07-23 4125
动态rem: https://blog.csdn.net/weixin_49088636/article/details/128798911?这样也可以做到宽高等比，通常用于响应式或大屏开发中，如果有需要，还要将rem做为动态尺寸。利用padding的特性，padding的计算方式是以父级的宽度进行计算的，如果父级没有，则向上继续寻找，找不到则已屏幕宽为准。此属性可直接在元素上设置宽高比，但存在兼容性问题，可在手机端使用。我们可以通过这一属性进行计算。
css 设定宽高比例,css 不规整元素的宽高等比例
weixin_34146759的博客
08-03 499
不规整元素的宽高等比例在不同屏幕情况中不同宽高的元素都以相同等比例、等宽和等高方式展示。需求设计师希望页面的图片区域，以宽高为2:1比例且所有图片的等宽和等高的方式展示。小加同学觉得设计师这需求太容易，分分钟搞定，拿到图片后便开始刷刷的撸代码。原型设计稿大致如下:bootstrap 栅格系统思路每个图片区域宽度为父元素宽度的25%，图片的宽度设置100%，其高度根据宽度等比例自动缩放(小加以为图片...
纯 CSS 实现高度与宽度成比例的效果
Bright2017的博客
08-14 1457
纯 CSS 实现高度与宽度成比例的效果 首先需要知道，一个元素的padding，如果值是一个百分比，那这个百分比时相对于其父元素的宽度而言的，即使对于padding-bottom和padding-top也是如此。 另外在计算overflow时，是将元素的内容区域（即width/height对应的区域）和 padding 区域一起计算的。换句话说，即使将元...
CSS 不规整元素的宽高等比例
哆啦咪^Pluser
05-14 1890
CSS 不规整元素的宽高等比例，在不同屏幕情况中不同宽高的元素都以相同等比例、等宽和等高方式展示。
CSS 属性之中经常出现的百分比（转）
08-27 153
CSS 的属性值中经常会出现百分比，搞清它们的基数是一件很重要的事情。我特意查看了一下 W3C 的 CSS2.1 标准，在此整理下： 百分比单位 乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width 乘以包含块的高度 top, bottom, height, max-heigh...
微信小程序CSS滤镜实现图片固定比例展示
本文主要介绍了在微信小程序中利用CSS filter属性实现图片保持固定比例的技巧。在小程序开发中，由于页面宽度通常被限制为750rpx，开发者可能遇到需要在不同屏幕尺寸下保持图片比例的问题。例如，当设计一个列表Cell...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值