巧用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%的话,那么padding-bottom的值为 50% / 3.2 = 15.625%;)
4、最终结果为:
看图片可以知道自适应后的宽高比 320 / 100 = 800 / 250 (原始宽高比)。
tips: 文章可能写的不好,还望见谅。
有疑问可以留言,看到了之后一定回复。
巧用padding让图片宽高比固定并自适应布局的更多相关文章
- 加载的过程中图片变形了? --教你自定义自动适配图片宽高比的RatioLayout
很多同行在开发中可能会遇到这样的问题,就是在加载图片的时候会出现图片变形的问题.其实这很可能就是你的图片宽高比和图片所在容器的宽高比不匹配造成的.比如说图片的宽为200,高为100.宽高比就是2,那么 ...
- 确保img的宽高比固定
html: <div class="wrapper"> <swiper :options="swiperOption"> <swi ...
- jq获取图片的原始尺寸,自适应布局
原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(), ...
- css布局之左侧固定右侧自适应布局
参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...
- FLEX实现两侧边栏固定中间自适应布局
<style type="text/css"> #outer{ display: flex; width: 100%; flex-flow: row nowrap; } ...
- CSS实现自适应下保持宽高比
在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width ...
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
- AspectRatio图片的宽高比、Card 卡片组件
一.AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度 ...
- 使用css让动态容器按固定宽高比显示
需求:页面上有一个div的宽度是随着屏幕宽度的改变而改变的,但其宽高比始终是2:1,也就是当宽度是1000px时,高度为500px 分析:无论浏览器窗口如何改变,始终要让目标元素的宽高比保持2:1,我 ...
随机推荐
- linux eclipse的桌面快捷方式
在桌面上创建一个eclipse.desktop [Desktop Entry] Encoding=UTF- Name=Eclipse Comment=Eclipse IDE Exec=/opt/Dev ...
- Linux安装jdk10
1.官网下载jdk10 下载方式两种,一种是wget下载,一种是windows系统下载,然后上传到linux系统上. 2.解压到/usr/local/java mkdir /usr/local/jav ...
- java 跨数据库导入大数据
java 跨数据库导入大数据 /** * java程序跨服务器跨数据库批量导入导出百万级数据 * @param args * @throws Exception */ public static vo ...
- INSPIRED启示录 读书笔记 - 第31章 苹果公司给我的启示
苹果公司值得学习的经验 1.硬件为软件服务:苹果公司明白硬件必须为软件服务,软件直接服务用户,满足用户需求.采用多点触控显示屏.重力加速器.距离传感器这些硬件技术是为了配合软件满足用户需求 2.软件为 ...
- Helm - Kubernetes包管理专家
What is Helm? - The package manager for kubernetes, Helm is the best way to find, share, and use sof ...
- HDU 2603 二分匹配
#include <queue>#include <vector>#include <cstdio>#include <cstring>#include ...
- JS实现选项卡切换效果
1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...
- 修改SpringBoot 默认的小叶子图标
Springboot 项目,在浏览器中访问时,浏览器上导航栏的图标是一片绿色的叶子,我们可以修改它. 将格式为.ico的图片放入以下任一项目文件夹即可.但,图片命名必须为favicon.ico 1.类 ...
- Codeforces Round #283 (Div. 2) A ,B ,C 暴力,暴力,暴力
A. Minimum Difficulty time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- Linux下DB2的TCP配置
1切换到db2实例用户下(uppdb) su - uppdb 2查看db2是否开启tcp服务 db2set -all 设置tcp服务:db2set DB2COMM=TCPIP 3查看是否配置db2 t ...