CSS图片宽度设置百分比 , 高度同宽度相同
在图片长宽不相等的情况下,想将长宽设置为相等并且自适应屏幕,可以通过 js 的方式进行设置并通过监听 resize 来实时更新,但是这种方式很麻烦。
这里通过 css 来达到我们想要的效果:
<div class='box'>
<img src="...">
</div>
需要添加一个父元素来达到我们的目的。
.box {
position: relative;
width: 50%;
}
.box:before {
content: "";
display: block;
padding-top: 100%;
}
或者:
.box{
position: relative;
width: 50%;
height:;
padding-bottom: 50%;
}
我们在这里定义了一个伪元素并且将其 padding-top
设置为 100%,因为这里的 padding-top 是相对于元素的 width 的。
现在我们定义了一个 .box
元素,它的长和宽是相等的,现在我们只需要设置 img 的 CSS 即可:
.box img {
position: absolute;
top:;
left:;
width: 100%;
height: 100%;
}
CSS图片宽度设置百分比 , 高度同宽度相同的更多相关文章
- 宽度设置百分比 高度跟宽度一样css解决方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ## GridView 布局:item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##
一.item设置的高度和宽度不起作用 转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和 ...
- [Android Pro] listView和GridView的item设置的高度和宽度不起作用
referece to : http://blog.csdn.net/beibeixiao/article/details/9032569 1. 在Android开发中会发现,有时listVi ...
- HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...
- 纯css设置元素高度与宽度相等
设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...
- css设置div高度与宽度相等的一种方法
div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...
- get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。
设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div c ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- Element el-table-column组件列宽度设置百分比无效
问题 使用Element table组件时,给列设置百分比宽度无效(width="30%") 解决 用属性min-width="3"代替属性width=&quo ...
随机推荐
- BZOJ 4176 Lucas的数论 莫比乌斯反演+杜教筛
题意概述:求,n<=10^9,其中d(n)表示n的约数个数. 分析: 首先想要快速计算上面的柿子就要先把d(ij)表示出来,有个神奇的结论: 证明:当且仅当a,b没有相同的质因数的时候我们统计其 ...
- Python—字典(当索引不好用时)
一.定义与概念 1.字典是针对非序列集合而提供的一种数据类型 举例:检索学生信息. “<键><值>对”. 键(即身份证号码) 值(即学生信息). “键值对”例子 姓名和电话号码 ...
- window对象与document对象的区别
[window对象] 它是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口. 属性 defaultStatus 缺省的状态条消息 document 当前显示的文档(该属性本身也是一个对象) fra ...
- C# HttpWebRequest post提交数据,提交对象
1.客户端方法 //属于客户端 //要向URL Post的方法 public void PostResponse() { HttpWebRequest req = (HttpWebRequest)Ht ...
- 认识简单的C
- 【Linux】- 文件基本属性
Linux系统是一种典型的多用户系统,不同的用户处于不同的地位,拥有不同的权限.为了保护系统的安全性,Linux系统对不同的用户访问同一文件(包括目录文件)的权限做了不同的规定. 在Linux中我们可 ...
- phpcms 最多上传 10 个附件 解决办法
修改文件:/phpcms/libs/classes/form.class.php
- php中的<?= ?>替换<?php echo ?>
首先修改PHP.ini文件.如下: 1. 将short_open_tag = Off 改成On 开启以后可以使用PHP的短标签:<? ?> <?= $test ?>来代替 &l ...
- Python运算符与编码
阅读目录 while 循环 运算符 编码的问题 单位转换 整数 布尔值 while 循环 在生活中,我们遇到过循环的事情吧?比如循环听歌.在程序中,也是存才的,这就是流程控制语句 while 1.基本 ...
- 苹果IOS、安卓推送功能开发
IOS推送开发:以下是基于开源javapns推送开发1.DerInputStream.getLength(): lengthTag=111, too big.先排除是否由于打包时证书 .p12 文件被 ...