css保持一定的宽高比

2024-09-06

使用css保持一定宽高比例

需求描述:移动端实现横跨页面半圆.(类似问题,实现4x4的正方形网格) 简化问题,我们可以理解为实现一个高度和宽度比为1:2的块. 需要解决问题: 1,高度和宽度按照一定比例. 2,外容器高度和宽度不确定. 3,尽量不使用图片和脚本替代. 4,兼容移动端. 编写html <div class = "semicircle"></div> 思考一,使用height:100%, body{ margin:0; width: 100%; background: ligh

css媒体查询aspect-ratio宽高比在less中的使用

css媒体查询有一个宽高比很方便,aspect-ratio ,可以直接使用宽/高来进行页面适配使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内适配 320*50 设计图样式 @media screen and (min-aspect-ratio: ~"249/50") and (max-aspect-ratio: ~"29/4"){ @base: 320; @convert: 375/@base; .conta

使用css让动态容器按固定宽高比显示

需求:页面上有一个div的宽度是随着屏幕宽度的改变而改变的,但其宽高比始终是2:1,也就是当宽度是1000px时,高度为500px 分析:无论浏览器窗口如何改变,始终要让目标元素的宽高比保持2:1,我们第一个想到的可能是使用js来实现,但是使用js来实现往往会比较耗费性能,那么今天我们就来讲下使用css来完成这个需求. 实现:作为“码农”我们还是直接上代码来得直观一点! html: <body> <div class="container"> <div c

CSS实现自适应下保持宽高比

在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width值,然后高度height设置auto.如果是div,我们该如何处理呢. 背景图片宽高比固定下面,我仿照了移动端的聚划算网站中(https://ju.m.taobao.com/)中间一部分的布局. <!DOCTYPE html> <html lang="en"> &

get新技能：如何设置元素高度与宽度成特定比例。宽度改变，高度自动按比例改变。例如设置宽高比16:9。

设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div class="wrapper"> <div class="content">content</div> </div> </div> //css 代码 div{ border: 1px solid green; } .c

确保img的宽高比固定

html: <div class="wrapper"> <swiper :options="swiperOption"> <swiper-slide> <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1811/7c/8e5c4ab8ee8b7402.jpg_750x200_dd7a38dd.jpg" al

巧用padding让图片宽高比固定并自适应布局

1.从上图知道原始图片大小是 800 * 250,即宽高比为 3.2: 2.html 及 css 代码如下, 可以知道就只是在一个div里面放了一张图片,那么如何让这张图片的宽高比固定呢,看了css之后就知道了原来是神奇的padding帮了我们的忙. 3.当img的宽度为100%时,那么.banner的padding-bottom(padding-top也可以)的值为 100%(图片想要设置的宽度) / 3.2(图片的原始宽高比)= 31.25%: (如果你想把 img 的宽度设为50%的话,那

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

点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自适应,高度为宽度一半的容器. 这里先以高度为宽度一半为例,也可以是其他任意比例. 一.思考如何实现这个问题类似于:我们在移动端页面,上面有一张宽度 100% 的图片,如果我们没设置高度,则图片会根据原有尺寸,等比缩放. 我们可以借助这个想法,根据元素高度,来为元素设置一个相应比例的高度即可. 二.实现方法1

c# winform DirectX播放器可以任意设置宽高比屏幕拉伸

第一步:dll引用 Microsoft.DirectX.dll Microsoft.DirectX.AudioVideoPlayback.dll 如果没有的话,可能需要安装微软的DRECTX JDK directx支持的视频文件格式: (*.avi; *.mov; *.mpg; *.mpeg; *.ts; *.wmv; *.vob; *.dat; *.rm; *.rmvb; *.flv)|*.avi; *.mov; *.mpg; *.mpeg; *.ts; *.wmv; *.vob; *.dat

加载的过程中图片变形了? --教你自定义自动适配图片宽高比的RatioLayout

很多同行在开发中可能会遇到这样的问题,就是在加载图片的时候会出现图片变形的问题.其实这很可能就是你的图片宽高比和图片所在容器的宽高比不匹配造成的.比如说图片的宽为200,高为100.宽高比就是2,那么这时候把它放在宽高比为1或者3的控件上就会分别出现变窄和变宽的问题.只有在容器宽高比为2的时候图片才会和原始显示效果一样.怎样解决这个问题呢?这个时候就可以创建一个能够自适应图片宽高比的父容器来包裹ImageView就可以了.在使用RatioLayout的时候要注意以下几点: 1)ImageView

有损FLV视频的画面宽高比修改方案

问题背景: 需要向网站上发布一条视频新闻,就是新闻只有一段视频.上面给的是一个FLV的视频,大小接近200M,差不多200分钟吧.本来觉得很简单的事,直接上传发布就完了,但是一波三折啊……第一轮上传时直接上传原视频,结果传上去发布之后,视频宽度被拉得很宽,高度却不变,也就是宽高比变得很大很大:发现问题后就用格式工厂进行转格式,过程中调整输出配置,让他输出16:9的画面,结果很快就转化完成(此时就有问题了,但是没觉察出来),然后就是第二轮上传,这次上传的视频预览效果不错,却忽略了有损转化的时间问题

android -------- ConstraintLayout 宽高比和偏移量比（三）

前面的文章 ConstraintLayout 介绍 (一) ConstraintLayout约束属性 (二) 此博文主要讲解: app:layout_constraintHorizontal_biasapp:layout_constraintDimensionRatio 1:app:layout_constraintDimensionRatio(宽高比/百分比布局) 这个属性感觉非常实用,按照比例来分配布局案例: <?xml version="1.0" encoding=&qu

Android OpenGL ES(四)----调整屏幕的宽高比

1.宽高比问题我们如今相当熟悉这样一个事实,在OpenGL里,我们要渲染的一切物体都要映射到X轴和Y轴上[-1,1]的范围内,对于Z轴也一样.这个范围内的坐标被称为归一化设备坐标,其独立于屏幕实际尺寸或形状. 不幸的是,由于它们独立于实际的屏幕尺寸,假设直接使用它们,我们就会遇到问题.比如在横屏模式下被压扁的桌子. 如果实际的设备分辨率以像素为单位是1280*720,这在新的Android设备上是一个经常使用的分辨率.为了使讨论更加easy.让我们也临时假定OpenGL占用整个显示屏. 假设设

canvas基础入门（一）canvas的width、height于css样式中的宽高区别

canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也是w3c的标准,如下: <canvas id="mycanvas" width="300" height="300">浏览器不支持Canvas,请升级或改用其它浏览器!</canvas> <script type=&qu

AspectRatio图片的宽高比、Card 卡片组件

一.AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域.如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio 最终将会去优先适应布局限制条件,而忽略所设置的比率. aspectRatio 宽高比,最终可能不会根据这个值去布局,具体则要

css体验优化之图片容器设置宽高比

需求我们在做web页面的时候,经常会有一些图片列表,例如下图的视频列表以及表情列表: 需求要求: 1. 列表是responsive的,在不同宽度的浏览器下面,图片要自适应容器宽度 2. 图片在自适应的过程中,图片的长宽比要保持不变常规解决方案在container宽度固定的需求中(比如PC版页面),我们直接设置图片容器或者图片为固定的宽高就好了,比如: img{ width:330px; height:180px; } 但是这个不能满足需求,为了满足上面的需求两点,通常我们会想

css实现保持div的等宽高比

这篇文章主要为回答这个问题:“做响应式网页,如何让一个div的高和宽保持比例放大或是缩小?”,这里不介绍媒体查询的实现. 那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定). 下面以高宽 2:1 为例,通过2种方式来实现这种效果. 方式一:利用定位实现 .wrapper{ position : relative; background: #ccc; width: 10%; paddin

css怎样让元素显示指定的宽高比

.father { width: 100% } .child {; padding-bottom: 20%; background: green; overflow: hidden; } <body> <div class="father"> <div class="child"></div> </div> </body>

CSS布局 -- 左右定宽，中间自适应

左右定宽,中间自适应有几种方法可以实现改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left margin-right 查看 demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

CSS布局 -- 左侧定宽，右侧自适应

左侧定宽,右侧自适应有很多种方法可以实现缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

CSS Transform让百分比宽高布局元素水平垂直居中

很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;margin-top:-50px这样的写法.但如果这个元素的宽高是用百分比表示呢? 如果使用百分比来设置宽高的话,以前哪个负值方法已经用不上了,这个我们发现在一个小的窍门,就是使用CSS3中的transform的translate转换属性.下面来看代码实例: HTML代码 <div class="

css保持一定的宽高比

热门专题