我们在做移动端列表，通常会做到图文列表，列表是自适应的。当列表中有图片，图片的宽度是随着列表宽的变化而变化，我们为了在图片宽度变化的时候做到图片的不变形，所有采用以下办法。

本文章只讲语法

html 结构

<div class='detail'>
  <div class="person-pic-wrap">
     <img :src='studentDetailDto.headPhoto'>
  </div>
　<div class="person-list>
　　<ul>文字</ul>
</div>
</div>
给大家说一下核心思路，大家就明白了
detail 父级弹性盒子，宽度100%
person-pic-wrap 图片容器 30%宽度
img宽度高度100%
padding-bottom 值和宽度一致， 就生成一个宽高1比1的容器 
css代码
方法1
.detail{
  width: 100%;
  height:120px;
  position: absolute;
  display: flex;
  justify-content: space-around;
  bottom: 0;
  background: darkgoldenrod;
}
.person-pic-wrap{
  width: 30%;
  padding-bottom: 30%;
}
.person-pic-wrap>img{
  width: 100%;
}

方法2 使用伪类
  <style>

    * {

      margin: 0;

      padding: 0;

    }

    img {

      width: 100%;

      height: 100%;

      max-height: 100%;

      max-width: 100%;

    }

    .box {

      width: 100%;

      display: flex;

      background: blue;

    }

    .content {

      width: 30%;

      position: relative;

    }

    .content:after {

      content: '';

      display: block;

      padding-bottom: 30%;

    }

    .text {

      width: 100%;

      height: 100%;

      position: absolute;

      top: 0;

      color: white;

      padding: 20px;

      box-sizing: border-box;

      border: 1px solid red;

      display: flex;

      justify-content: center;

      align-items: center;

    }

  </style>

</head>

<body>

<div class="box">

  <div class="content">

    <img src="https://goss.veer.com/creative/vcg/veer/612/veer-146053959.jpg">

    <p class="text">随着消费水平的提升，居民消费结构显著升级，健康消费也成为新的热点，作为人们日常生活的重要构成，健康人居备受关注，同时，其相关产业也呈现出显著的健康化趋势。</p>

  </div>

</div>

</body>

</html>
技巧十分简单。

使用 padding-bottom 设置高度基于宽度的自适应的更多相关文章

  1. 不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形

    现在css3支持圆角矩形,但是为了兼容性问题,虽然比较麻烦,但还是有必要了解一下以下方法. 在一个div内,包含8个div,控制这个8个div的height.margin以及border属性值,以达到 ...

  2. js设置高度和宽度相等

    <!doctype html><html><head><meta charset="utf-8"><link rel=&quo ...

  3. CSS中为什么有的元素能够设置高度，而有的元素却不能设置高度与宽度？

    可以使用{display:block}将内联元素变为块级元素,同时使用{display:inline}将块级元素变为内联元素. {display:inline-block}又是怎么回事,根据张鑫旭老师 ...

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

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

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

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

  6. 如何给span设置高度宽度？

    内容提要:给Span设置高度和宽度后没有作用.本文介绍了如何如何给span设置高度宽度. CSS模型中经常用的容器是DIV和span. 给Span设置高度和宽度后没有作用. <style typ ...

  7. CSS实现高度和宽度自适应

    其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...

  8. html页面设置<span>的高度和宽度

    <span>标签属于行内元素(inline),所以无法设置高度和宽度:如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inle-block): 1 span{di ...

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

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

随机推荐

  1. 笔记-python-语法-property

    笔记-python-语法-property 1.      property 看到@property,不明白什么意思,查找文档了解一下. 1.1.    property类 proerty是pytho ...

  2. scala高级性质-隐式转换 -02

    今天我们来介绍scala的高级特性,上次已经介绍过他的一个特性:高阶函数,这次是隐式转换 1.隐式转换的例子 read的例子 解析:发现这个file没有read的方法,然后就开始在开始在这个上下文里面 ...

  3. 剑指offer题目练习一

    看见了一道二维数组找数的题,已排好序的数组(从左至右从上到下,都是由小变大的)让找数,瞬间就出思路了,并没有必要去看他的解释,两次二分就搞定了. #include<cstdio> #inc ...

  4. 大中型 UGC 平台的反垃圾（anti-spam）工作

    本文来自网易云社区 随着互联网技术的日渐发展,相继诞生了垂直社区.社交平台.短视频应用.网络直播等越来越多样的产品.但在内容爆炸式增长的同时,海量UGC中也夹杂着各种违规垃圾信息,包括垃圾广告.诈骗信 ...

  5. 用CSS伪元素制作箭头

    现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...

  6. 《Cracking the Coding Interview》——第8章：面向对象设计——题目8

    2014-04-23 23:49 题目:有个棋牌游戏叫Othello,也叫Reversi.请看游戏规则.中文应该叫黑白棋吧,不常玩儿就是了. 解法:既然这题的规则很清楚,也很清楚,我就写了一个命令行的 ...

  7. 超链接标签的CSS伪类link,visited,hover,active

    CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有: ...

  8. MQ消息中间件

    MQ是什么? MQ是Message Queue消息队列的缩写.消息队列是一种应用程序对应用程序的通信方法.应用程序通过写和检索入列队的针对应用程序的数据(消息)来进行通信,而不需要专用连接来链接它们. ...

  9. katalon系列一：初识Katalon Studio自动化测试工具

    最近准备把公司的系统搞上UI自动化,先是自己用Python+selenium+pytest写了一个框架,开始写case的时候发现效率极其慢.原因为: (1)开发为提高前端响应时间,使用前端路由技术,一 ...

  10. Android color颜色-色号总结

    code时经常会用到颜色,然而对于像我这样的对于颜色不是很敏感的同学来说,就很痛苦了. 我想要某种颜色,但是又说不出来具体是哪种:这边总结了一下color种类以及色号. <?xml versio ...