在图片长宽不相等的情况下,想将长宽设置为相等并且自适应屏幕,可以通过 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图片宽度设置百分比 , 高度同宽度相同的更多相关文章

  1. 宽度设置百分比 高度跟宽度一样css解决方案

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ## GridView 布局:item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##

    一.item设置的高度和宽度不起作用 转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和 ...

  3. [Android Pro] listView和GridView的item设置的高度和宽度不起作用

    referece to : http://blog.csdn.net/beibeixiao/article/details/9032569 1.     在Android开发中会发现,有时listVi ...

  4. HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客

    原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...

  5. 纯css设置元素高度与宽度相等

    设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...

  6. css设置div高度与宽度相等的一种方法

    div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...

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

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

  8. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  9. Element el-table-column组件列宽度设置百分比无效

    问题 使用Element table组件时,给列设置百分比宽度无效(width="30%") 解决 用属性min-width="3"代替属性width=&quo ...

随机推荐

  1. jQuery File Upload文件上传插件简单使用

    前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...

  2. Prime Matrix(暴力出奇迹)

    Description You've got an n × m matrix. The matrix consists of integers. In one move, you can apply ...

  3. bootstrap使用中遇到的坑

    一.例如: <div class="form-group"> <label class="control-label col-lg-3"> ...

  4. Windows平台下安装.net coreclr

    .net coreclr 已经发布RC1版本,安装方法如下: 1.安装DNVM,DNVM是.net运行时管理器,负责管理所有版本的.net运行时(.net framework..net coreclr ...

  5. JDK源码分析 – LinkedList

    LinkedList类的申明 public class LinkedList<E> extends AbstractSequentialList<E> implements L ...

  6. 【Docker】- 基本命令

    1.docker ps -a    显示所有容器 2.doker ps -l 显示最近一次启动的容器 3.docker ps   显示正在运行的容器 4.docker start [容器ID]  启动 ...

  7. Oracle 转义字符

    id sfds_V_SF ASD_V_DSAF SD_V_DSAD   下划线是Oracle特殊字符,需要转移,如下    select * from systab t where t.id like ...

  8. Oracle DB_LINK如何使用

    语句,或可通过可视化操作 -- Create database link create database link DBL_TESTconnect to UID identified by PSWus ...

  9. STL使用记录

    1,map 对map实在不熟...赶紧记录一下用法吧. 后来再发现新的用法再补充吧 定义: map<int, int> m; 其中的int可以为自定义的任何类型. m[key值类型的变量] ...

  10. BZOJ3534:[SDOI2014]重建——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3534 https://www.luogu.org/problemnew/show/P3317 T国 ...