CSS如何根据高度缩放和宽高比宽度？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在onCreate中获取View的高度和宽度

如何在onCreate中获取View的高度和宽度在开发过程中经常需要获取到View的宽和高，可以通过View.getWidth()和View.getHeight()来得到宽高。...只有经过“测量”和“布局”之后，View才能正确地完成绘制。而这一切是发生在onCreate方法之后的。...所以在onCreate中直接使用View.getWidth()和View.getHeight()是无法得到正确的值的。那应该怎么onCreate中获取View的宽高呢?...savedInstanceState); view.post(new Runnable(){ public void run(){ //在这里使用View.getWidth()和View.getHeight

5.3K2 0

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安卓...在国产的猎豹浏览器以及其他一些浏览器里面,有可能也不支持.总而言之,这个坑踩大了.不过没关系,大部分的常见布局问题,我都能解决掉.但是,下面这个….我真心有点费解.不过,没关系,通过我的研究,最终还是很快用CSS...需要的效果,如下图: 需求分析看图,其实很简单.如果宽度是固定的,那么这个布局就不要太简单了. 问题是,设备的宽度是不固定的哦,那么问题就是,在不知道具体宽度的时候,如何来设定它对应的高度呢?...也就是说,如何在CSS中,找到一个高度和宽度挂钩的属性.只要存在这个参数,那么,问题就能解决. 那么有没有这个参数呢?...在我们遇到一些问题的时候,尤其是布局这种问题,我们要考虑的是,能不能用CSS解决,而不时一位的去考虑JS.毕竟,JS是用来交互的,而CSS是用来布局的.

1.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

css如何实现一个元素高度固定宽度按比例显示？

用padding-top百分比可以实现宽度固定高度按比例展示，现在的需求是对一个video视频的盒子div高度是固定的，宽度如何按比例展示？...解决后效果如图：红框标注的即是我在上面高度比例固定的范围内宽度自适应的效果； css代码： .content { margin: 0 auto; height: 79vh;...video-orientation="portrait" > 由于视频是有宽高比的...，这里给视频的高度直接是外面盒子的高度*比例，就等于视频的宽，为了防止视频过宽超出屏幕，这里加一个max-width：100vw;限制一下，然后通过margin:0 auto;居中显示，成功解决！

1.9K1 0

如何在canvas中模拟css的背景图片样式

// 缩放高度 const zoomHeight = (ratio, width) => { // width / h = ratio return width / ratio } 根据原比例和新的宽度或高度...: cover; } 这个实现也很简单，根据图片的宽高比和canvas的宽高比判断，到底是缩放图片的宽度和canvas的宽度一致，还是缩放图片的高度和canvas的高度一致。...canvas的宽高比，那么图片高度缩放到和canvas的高度一致，宽度自适应 drawOpt.height = canvasHeight drawOpt.width...: contain; } 实现刚好和cover类型的实现反过来即可，如果图片的宽高比大于canvas的宽高比，为了让图片显示完全，让图片的宽度和canvas的宽度一致，高度自适应。...canvas的宽高比，那么图片宽度缩放到和canvas的宽度一致，高度自适应 drawOpt.width = canvasWidth drawOpt.height

7.1K4 1

Web 技术：CSS最小和最大(宽度高度)知识点及优缺点

在本文中，我们将详细介绍CSS的最大和最小宽度和高度属性，并使用可能的用例和技巧详细解释每一个属性。 width 属性首先要讨论的是与宽度相关的属性。...height 属性除了最小和最大宽度属性外，我们还具有与高度相同的属性。...为了防止这种情况，我们应该重新设置最小高度值。看看HTML和CSS是怎么样的。 HTML 元素，因此它已经具有其父元素的100％宽度，对吗？考虑下面为模态设计简化的测试案例。请注意，如果可用视口空间不足，则宽度如何更改为其父级的100％。 ?...最大宽度/高度和视口单位的流体比率为了使比例容器能够根据视口大小进行响应缩放，引入了padding hack。现在，我们可以通过组合CSS中的视口单位和最大宽度/高度来模仿相同的行为。 ?

6.1K2 0

H5活动宣传页通用布局技术解决方案

毕竟是要将图片按比例进行缩放，为了表现效果更好点，手机的视窗宽高比还是要知道下，不然给你个正方形的图片做背景图，那效果就差得远了。...发光地球水平铺满这里将采用图片宽高比的方法来解决这个问题，可以参考我之前的文章： css中如何做到容器按比例缩放移动端重构实战系列6——icon与图片核心思想还是利用padding的百分比单位计算是基于元素的宽度...这里先根据实际内容分两种情况，第一种是固定宽度的内容，内容宽度小于320px的；还有一种是内容大于320px甚至是大于360px的，所以就需要考虑窄屏时候的缩放。...，于是又回到了上面的固定宽度通过计算得到其宽度与视窗宽度的百分比，设置该元素的宽度为百分比单位，如果内容是img引入的图片，则高度自动变化，如果是bg图片，则高度则采用上面的容器宽高比的方式来设置，且设置...视窗高度的百分比如果你的某个元素的定位或大小是基于视窗的高度来计算的，这就有点麻烦了，尤其是嵌套了好几层的情况。 css3提供了一个v系列的单位，其中vh就表示视窗的高度，但是安卓4.3-不支持。

1.4K4 2

H5活动宣传页通用布局技术解决方案

毕竟是要将图片按比例进行缩放，为了表现效果更好点，手机的视窗宽高比还是要知道下，不然给你个正方形的图片做背景图，那效果就差得远了。...发光地球水平铺满这里将采用图片宽高比的方法来解决这个问题，可以参考我之前的文章： css中如何做到容器按比例缩放移动端重构实战系列6——icon与图片核心思想还是利用padding的百分比单位计算是基于元素的宽度...这里先根据实际内容分两种情况，第一种是固定宽度的内容，内容宽度小于320px的；还有一种是内容大于320px甚至是大于360px的，所以就需要考虑窄屏时候的缩放。...，于是又回到了上面的固定宽度通过计算得到其宽度与视窗宽度的百分比，设置该元素的宽度为百分比单位，如果内容是img引入的图片，则高度自动变化，如果是bg图片，则高度则采用上面的容器宽高比的方式来设置，且设置...视窗高度的百分比如果你的某个元素的定位或大小是基于视窗的高度来计算的，这就有点麻烦了，尤其是嵌套了好几层的情况。 css3提供了一个v系列的单位，其中vh就表示视窗的高度，但是安卓4.3-不支持。

1.7K5 0

H5活动宣传页通用布局技术解决方案

毕竟是要将图片按比例进行缩放，为了表现效果更好点，手机的视窗宽高比还是要知道下，不然给你个正方形的图片做背景图，那效果就差得远了。...发光地球水平铺满这里将采用图片宽高比的方法来解决这个问题，可以参考我之前的文章： css中如何做到容器按比例缩放移动端重构实战系列6——icon与图片核心思想还是利用padding的百分比单位计算是基于元素的宽度...这里先根据实际内容分两种情况，第一种是固定宽度的内容，内容宽度小于320px的；还有一种是内容大于320px甚至是大于360px的，所以就需要考虑窄屏时候的缩放。...，于是又回到了上面的固定宽度通过计算得到其宽度与视窗宽度的百分比，设置该元素的宽度为百分比单位，如果内容是img引入的图片，则高度自动变化，如果是bg图片，则高度则采用上面的容器宽高比的方式来设置，且设置...视窗高度的百分比如果你的某个元素的定位或大小是基于视窗的高度来计算的，这就有点麻烦了，尤其是嵌套了好几层的情况。 css3提供了一个v系列的单位，其中vh就表示视窗的高度，但是安卓4.3-不支持。

1.4K1 0

可视化大屏的几种屏幕适配方案，总有一种是你需要的

即通过css的transform属性来对组件容器canvas进行整体的缩放，保持原比例，在屏幕居中显示，当然你可以选择只缩放宽度或高度，但是这样会变形。...实现也很简单，计算一下画布原始比例，再计算一下屏幕的比例，然后再判断是宽度和屏幕一致，高度自适应，还是高度和屏幕一致，宽度自适应： // 当前窗口宽高比例 let windowWidth = window.innerWidth...// 画布的宽度调整为屏幕的宽度 newCanvasWidth = windowWidth; // 画布的高度根据画布原比例进行缩放 newCanvasHeight =...第一种情况，假设画布的宽是高的两倍，那么比例为2，要保持原比例2适应屏幕，显然只能宽度和屏幕一致，高度自适应，因为如果高度和屏幕一致，那么宽度需要是高度的两倍，屏幕显然显示不下：第二种情况，假设画布的高是宽的两倍...，那么比例为0.5，要保持比例为0.5适应屏幕，需要高度和屏幕一致，宽度自适应：计算完了画布适应屏幕后的新宽高，接下来就可以计算它相对于画布原始宽高的缩放比例： // ... // 相对于画布原始宽高的缩放比例

3.2K4 1

【CSS】318- CSS实现宽高等比自适应容器

在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。于是我们就需要实现一个宽度自适应，高度为宽度一半的容器。...这里先以高度为宽度一半为例，也可以是其他任意比例。一、思考如何实现这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。...我们可以借助这个想法，根据元素高度，来为元素设置一个相应比例的高度即可。...这个方法相比原来图片的等比缩放，有个优点：无论图片是否加载成功，容器高度始终是计算完成，不会造成页面抖动，也不会造成页面重绘，从而提升性能。下面看看这种情况下，图片加载成功和失败的对比： ?...这里看下面代码和效果图理解下： HTML代码：我是王平安，pingan8787 CSS代码： .box

1.4K3 0

必应首页平铺背景图片的实现方案

近期某个项目中需要实现以下需求：保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致，则以图片中心为基点等比缩放背景图片，以适应屏幕尺寸。...以上需求的原则就是始终保持背景图片宽高比，居中等比缩放填满屏幕。我们知道background-size: cover;是在背景图片保持原始比例的基础上，等比缩放覆盖背景区域。...必应的实现方案其实很简单，总结一句话就是：使用background-size: cover;覆盖背景区域，使用JavaScript根据屏幕尺寸动态计算背景图片的偏移量。...当然有工具可以实现，本例中用的是现成的数据; 获取浏览器可视区域的尺寸，并计算宽高比; 如果屏幕宽高比大于图片宽高比，将图片宽度撑满浏览器视窗，此时屏幕高度不足，图片向上偏移; 如果屏幕宽高比小于图片宽高比...，将图片高度撑满浏览器视窗，此时屏幕宽度不足，图片向左偏移; 以上算法可以基本满足项目需求。

1.8K5 0

Cocos——UI多端适配之道

前端同学通常都用媒体查询或 rem 做多端适配，但是在 Cocos 上 CSS 不复存在。那你知道在 Cocos 上如何做到多端适配吗？...业务中这几年引进了 Cocos 游戏引擎来实现新题型，曾经我们那样熟悉的CSS在Cocos中将不复存在，这时在Cocos上我们要如何实现这种多端适配呢？...我们再设置为 Fit Width 模式看看效果，会发现设计分辨率的宽度会自动撑满屏幕的宽度，而由于屏幕分辨率宽高比比设计分辨率小，所以屏幕上下会多显示一部分背景图。...再看看屏幕分辨率宽高比大于设计分辨率宽高比的情况（iPhoneX 情况）我们先设置为 Fit Height 模式看看效果，会发现设计分辨率的高度会自动撑满屏幕的高度，而由于屏幕分辨率宽高比比设计分辨率大...多端贴边距离设置根据设计同学的要求，贴边节点（例如倒计时节点）在 PC 端、iPad 端、iPhoneX 端和 iPhone7 端贴边的距离都是不一样的，这个时候我们如何根据不同端分别设置贴边距离呢？

2.3K3 0

一键制作自适应等比缩放的雪碧图帧动画

为了适应不同的设备分辨率，一般会做几套不同大小的图去适配，那如何用一套图来自适应缩放呢？本文对等比缩放的雪碧图动画的原理进行分步讲解，并使用 gka 进行一键生成。...background-position 同样支持百分比，不同的是其百分比的值是根据元素宽高与背景图宽高计算得出的，公式如下 x百分比 = (x偏移量 / ((元素宽度 - 背景图片宽度) || 1))...图片保持正常的长宽比由于背景图片根据元素的宽高及进行填充展示，所以为了保持背景图片的正常宽高比，需要让元素的宽高比保持一致。...所以依据宽度来设置 padding-bottom 的百分比从而调整元素高度；另一方面，当元素的宽度为百分比时，同样是依据父容器的宽度计算的。...所以，保持元素的宽高比，只需要将 width 和 padding-bottom 按宽高比设置百分比即可。

2.4K3 0

uni-app&微信小程序图片组件的等比例缩放和自适应裁切显示

查看 uni-app 源码可以发现，图片组件有一个 320px 的宽度和 240px 的高度。...; position: relative } 这样，如果只给图片设置宽度或者高度的话，会导致图片被拉伸。...一般给 image 设置大小的时候要同时指定宽度和高度： /* CSS */ .image { width: 150px; height: 150px; } 如果图片的长度和宽度不固定...，可以设定宽度（或高度），然后高度（或宽度）自适应： /* CSS */ .image { width: 150px; height: auto; } 但如果一个列表中的图片大小不一，就比较麻烦...widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。 heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。

6.8K2 0

详解瀑布流布局的5种实现及oject-fit属性，附源码

在非等比缩放的情况下会被拉伸变形。设置宽度或者高度时，会保持原宽高比进行缩放。 ?...所以往往我们会在项目中使用第 3 种方式，即设置高度或者宽度。它会保持原有比例进行缩放。 ?...object-fit CSS3 的 object-fit 属性是用来指定「可替换元素」的内容是如何适应到容器中的。它的值有 5 种。...fill：会充满整个容器，不考虑宽高比，所以会被拉伸变形。 contain：会缩放到容器内，保持宽高比。 cover：会保持比例进行缩放，内容的尺寸一定会大于等于容器，然后进行裁剪。...JS计算缩放首先给定一个基准高度图片获取基准高度下的宽度，然后计算每一行能够放入多少张此时每一行图片肯定会小于容器宽度，然后这一行进行缩放到容器大小。在重新计算放大后的高度。

1.3K2 0

uni-app&微信小程序图片组件的等比例缩放和自适应裁切显示

查看 uni-app 源码可以发现，图片组件有一个 320px 的宽度和 240px 的高度。...; position: relative } 这样，如果只给图片设置宽度或者高度的话，会导致图片被拉伸。...一般给 image 设置大小的时候要同时指定宽度和高度： /* CSS */ .image { width: 150px; height: 150px; } 如果图片的长度和宽度不固定...，可以设定宽度（或高度），然后高度（或宽度）自适应： /* CSS */ .image { width: 150px; height: auto; } 但如果一个列表中的图片大小不一，就比较麻烦...widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。 heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。

1.6K3 0

图片布局的最全实现方式都在这了！附源码

在非等比缩放的情况下会被拉伸变形。设置宽度或者高度时，会保持原宽高比进行缩放。 ?...所以往往我们会在项目中使用第 3 种方式，即设置高度或者宽度。它会保持原有比例进行缩放。 ?...object-fit CSS3 的 object-fit 属性是用来指定「可替换元素」的内容是如何适应到容器中的。它的值有 5 种。...fill：会充满整个容器，不考虑宽高比，所以会被拉伸变形。 contain：会缩放到容器内，保持宽高比。 cover：会保持比例进行缩放，内容的尺寸一定会大于等于容器，然后进行裁剪。...JS计算缩放首先给定一个基准高度图片获取基准高度下的宽度，然后计算每一行能够放入多少张此时每一行图片肯定会小于容器宽度，然后这一行进行缩放到容器大小。在重新计算放大后的高度。

1.4K3 0

如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度，并按比例显示

本文将详细介绍如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度，并按比例显示。...使用 max-width 和 max-height 属性为了让图片按比例缩放以适应父元素的大小，我们可以使用 max-width 和 max-height 属性来设置图片的最大宽度和最大高度，同时保持图片的原始宽高比...这样做的好处是，无论父元素的大小如何变化，图片都会按照比例缩放。...在 img 标签中，我们使用了 max-width 和 max-height 属性来控制图片的最大宽度和高度，使其可以自适应容器大小。...因此，在实际使用过程中，我们需要根据具体情况进行调整和优化，以达到最佳显示效果。

15.5K0 0

每个高级前端工程师都应该知道的前端布局

2.自适应自适应是一套代码，无论屏幕尺寸如何变化，改变的只是页面的元素尺寸，而不会出现三栏变两栏的表格变化。以前，领导和设计总让我修改页面，说是自适应窗口的变化。结果要求把三栏改成两栏。...使用弹性布局使用百分比避免写死宽度和高度添加滚动条使用 rem 3.移动终端的常用宽度和高度垂直屏幕的常见宽高比：1:2, 2:3, 3:4, 3:5, 5:8, 9:16 横向屏幕的常见宽高比...border-radius 是一个百分比，是相对于其宽度而言的缺点计算困难。如果我们要根据设计草案定义元素的宽度和高度，必须将其转换为百分比单位。...flexible.js 插件还可以解决以下问题 em 和 rem 与之类似，它们都根据 font-size 来缩放页面布局，但 em 主要取决于直接父级标签 font-size 的大小，并且只会查找最近的父级标签...4.4 VW、VH 响应式布局因为 100vw = 100 视图窗口宽度，100vh = 100 视图窗口高度，那么根据 750 的设计草案，100vw 就是 750。

2322 0

如何打造一个高效适配的H5

就是无论窗口宽高比怎样，页面能自动缩放到窗口大小，而且元素的坐标及大小还可以使用精确和便于js计算的px为单位。...1、contain 模式：以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容，窗口与内容的宽度比或高度比之间较小者缩放填满窗口，当窗口宽高比和视觉稿不同时，另一方向的两侧出现留空部分。...2、cover 模式：以内容中心为基点按照窗口的宽高比等比缩放以适配窗口，窗口与内容的宽度比或高度比之间较大者缩放填满窗口，当窗口宽高比和视觉稿不同时，另一方向的两侧超出窗口被裁剪，这种模式不会出现「contain...根据友盟和腾讯云运营活动近几个月的数据统计，iphone5/5s 640*1136 这个分辨率是 Ios 平台占比最多的，同时过高的分辨率对低端机型是一种浪费，需要花额外多的流量来下载这些资源；同宽高比尺寸的平台占比数...还有一些复杂的层，但无外乎都可以拆分成以上几种类型层，将内容分层出来，每个层根据内容形式选用相应的适配模式进行缩放。总结 1、高效适配的核心思想是「缩放」。

1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭