css宽度自适应高度取比例

2024-11-04

css样式：宽高按一定比例进行自适应

纯 CSS 实现高度与宽度成比例的效果最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 CSS 定义如下: .item { float: left; margin: 10px 2%; width: 21%; } 这时遇到的一个需求:在保持 item 元素宽高比恒定(如高是宽的 1.618 倍)的情况下,使得 item 元素可以和父元素同比缩放. 我们知道,如果当 item 元素是图片,

Android实现图片宽度100%ImageView宽度且高度按比例自动伸缩

在ListView中为了实现图片宽度100%适应ImageView容器宽度,让高度自动按比例伸缩功能,查了很多资料,搞了一下午都没找出个现成的办法,不过貌似有个结论了,就是: Android自身不能实现这样的效果,只有自己动手丰衣足食 ImageView 中有个 scaleType 属性,设置图片在 view 中的缩放方式,本来以为 fit_center 可以实现,结果很无语,莫名其妙,没能实现宽度贴合容器宽度,两侧都是空白区域. ImageView.ScaleType设置图解解决方法: 1.

[frontend] 根据文字长度自适应宽度自适应高度+ Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick

CSS一行代码就可以解决第一个问题: 1.1 根据文字长度,自适应标签宽度解决方法:把width的设置删掉,加一行代码 display:table; .tag-footdetail{ /*width: 300px;*/ height: 40px; font-size: 1.5rem; line-height: 40px; text-align: center; border-radius: 15px; border: 1px solid #D2B991; float: lef

web图片100%宽度自适应,高度不塌陷

一般在web端图片100%自适应,在页面加载的时候存在高度塌陷的问题解决这个问题其实很简单,用padding-top设置百分比值来实现自适应,公式如下 padding-top = (Image Height / Image Width) * 100% 如:图片宽400px,高200px;套用上面公式计算出padding-top:值是50%; HTML代码 <div class="cover"> <img src="images/test.jpg"

CSS布局自适应高度解决方法

这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充.加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题. 先看代码: #wrap{ overflow: hidden; } #sideleft, #sideright{ padding-bottom: 32767px; margin-bottom: -32767px; } 实现原理: 块元素必

Android 设置ImageView宽度固定，其高度按比例缩放适应

今天和项目经理对喷了一下,他说在应用的列表数据中的图片应该宽度固定,高度按比例缩放自适应,我说,那岂不是很丑!直接让运营那边把图片处理成固定宽高比不就好了,省的我客户端麻烦了. 这家伙不同意,为毛呢,因为我们公司的图片尼玛全部是从别的网站上荡过来的,几万张图片,本身不知道图片宽度和高度....我日.... 好吧,既然提出了这么个需求,那我就实现呗,丑不丑就我就不管了... 我在群里问了些人有木有相关的实现,可惜没人鸟我,不知道是不是我问的太简单了还是没人会...于是乎网上搜了些相关的实现方式,还

常见css垂直自适应布局（css解决方法）

css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <title>div + css宽度自适应(液态布局)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type=&quo

常见css水平自适应布局

左右布局,左边固定,右边自适应布局 BFC方法解决 <!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/1999/xhtml"> <head> <titl

CSS学习笔记（6）--浮动，三列布局，高度宽度自适应

百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外框. 折腾了三天,最后在一个网站看到,左left浮动,右right浮动,中间啥都不用,既不用position也不用float,只要把center写在right后面就可以了! index.html <!DOCTYPE html> <html lang="en"> &l

css和css3弹性盒模型实现元素宽度（高度）自适应

一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应</title> <style> *{ padding: 0; margin: 0; } .left{ background: red; width: 200px; height: 200

纯CSS实现Div高度根据自适应宽度（百分百调整）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS实现Div高度根据自适应宽度(百分百调整)</title> </head> <style> .father { width: 100px; height: 100px; background: #222 } .element { width: 50%; height

div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw.vh.vmin.vmax.其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的单位,1vh = 1% viewport height:vmin是相对当前视口宽高中较小的一个的百分比单位,同理 vmax是相对当前视口宽高中较大

css利用padding百分比实现图片自适应高度

应用场景宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题重点:CSS百分比padding都是相对宽度计算的 <div class="works-item-t"> <img src="./150x200.png"> </div> .works-item-t { padding-bottom: %; position: relative; } .works-item-t >

使用padding代替高度实现背景图片高度按比例自适应

本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionately/ 高度百分比将高度设置成百分比时,其高度是基于父元素来定的,设置成50%,就是将该元素高度设置成父元素的高度值 x 50%. 但是将高度设置成百分比时,往往是不生效的!高度依然为0,这是为啥? 道理很简单,那就是父元素的高度也为0. 所以这就需要讲到浏览器对宽度及高度是如何计算的. 浏览

转：CSS布局奇淫技巧之-宽度自适应

css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽度固定,中间一列宽度自适应这个很好实现,左右两列分别左浮动和右浮动并给一个固定宽度,中间不浮动,也不设定宽度.(这个是有问题的,后面说明)这样基本就可以了.但为了兼容IE还必须做些工作. 看下代码结构: 效果为: 中间列要不要设置margin-left和margin-right ? 注意,中间那列

ECharts 高度宽度自适应（转载）

最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所以div容器的高度宽度必须指定为px,这设计不知道是为啥. google到的解决方案如下添加window.onresize=myCharts.resize在setOption之后我添加后图表的高度被压缩到了min-height,很奇怪,于是自己采用了如下解决方案,直接贴代码了. var worl

CSS 剩余宽度和高度完全填充

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>两列式全屏布局</title> <style type="text/css">html, body {margin: 0;padding: 0;} .top {border: solid 1px bla

CSS流体(自适应)布局下宽度分离原则

CSS流体(自适应)布局下宽度分离原则这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言之前曾作有“页面重构鑫三无准则之无宽度准则”一文,属于流体布局系列中的偏理论性的文章,本文也是这种性质的,可谓是“无宽度准则”一文的延续.

DIV+CSS布局中自适应高度的解决方法

div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西得小心使用本来有一很好的关于CSS+DIV的论坛不过现在关门了甚是可惜了给段比较好的讲布局的东西给你看看吧反正我看了是受益非浅,希望你能参悟由于是要让站工自已定制,所以开放了HTML以及CSS.JS等代码.但默认的CSS是CSS是不能改的. 在写这个CSS时,我尽量用最少的标签,这样很站对CSS不是很熟的站长也可以定制.另外布局时和写CSS时,总的思想的就是从大的到小

老生长谈：css实现右侧固定宽度，左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧? 要实现这种布局,也算比较简单.我们先给出html结构: <div id="wrap"> <div id="sidebar" style="height:240px;">固定宽

简单而兼容性好的Web自适应高度布局，纯CSS

纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{padding:0;margin:

css宽度自适应高度取比例

热门专题