【巧用padding让图片宽高比固定并自适应布局】的更多相关文章

巧用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%的话,那…

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

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

确保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…

jq获取图片的原始尺寸，自适应布局

原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(),$("img").height() 是无法稳定获取到img的准确尺寸,或为0,或偶尔为0: 解决方法: load(),元素加载完了之后执行: 代码如下: <!DOCTYPE html> <html lang="en"> <head>…

css布局之左侧固定右侧自适应布局

参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div style="float:left; width:490px; border-right:5px #333 solid; height:100%;"> <table class="form"> @Html.HiddenFor(m => m.Notif…

FLEX实现两侧边栏固定中间自适应布局

<style type="text/css"> #outer{ display: flex; width: 100%; flex-flow: row nowrap; } .left,.right{ width:200px; height:50px; background: red; } .middle{ flex-grow: 1; //决定如何分配剩余空间 background: yellow; } </style> <body> <div i…

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

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

CSS百分比padding实现比例固定图片自适应布局

一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di…

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

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

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

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