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

本文章只讲语法

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. 对Neural Machine Translation by Jointly Learning to Align and Translate论文的详解

    读论文 Neural Machine Translation by Jointly Learning to Align and Translate 这个论文是在NLP中第一个使用attention机制 ...

  2. 学习Pytbon第十天 函数2 内置方法和匿名函数

    print( all([1,-5,3]) )#如果可迭代对象里所有元素都为真则返回真.0不为真print( any([1,2]) )#如果数据里面任意一个数据为真返回则为真a= ascii([1,2, ...

  3. python系列3之内置函数和文件操作

    目录 自定义函数 内置函数 文件的操作 练习题 一. 自定义函数 1. 函数的创建 函数的创建 1.def关键字 2.函数名+() 3.冒号 4.缩进 5. return返回值,可以不写,默认的返回值 ...

  4. 使wlr写cnblog的博客-2 设置cnblog帐号

    ref:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html   使用: 打开Windows Live Writer,第一次 ...

  5. 关于学习less后一些感悟

    学习了一天的less发现,自己被自己弄的晕头转向,好在是学明白了! 一.写自己的第一个less css样式编程: 网址:http://www.1024i.com/demo/less/document. ...

  6. Android 面试收集录5 消息机制

    1.消息机制概述 1.1.消息机制的简介 在Android中使用消息机制,我们首先想到的就是Handler. 没错,Handler是Android消息机制的上层接口. Handler的使用过程很简单, ...

  7. SpringMVC---简单登录例子

    所需jar包aopalliance-1.0.jar.commons-logging-1.2.jar.spring-aop-5.0.0.RELEASE.jar.spring-beans-5.0.0.RE ...

  8. Entity FrameWork和Dapper的使用

    EF是微软系列下的更正苗红的重量级的ORM框架,功能强大,操作数据库的时候几乎不用写sql,可以像写C#代码一样操作数据库,尤其支持多表关联操作的时候极为方便,但是生成的sql语句性能很差,实在不敢恭 ...

  9. Bit与Byte的区别

    在工作中遇到一些概念模糊的地方, 需要记住了bit意为“位”或“比特”,是计算机运算的基础: byte意为“字节”,是计算机文件大小的基本计算单位: 说到usb2.0标准接口传输速率.许多人都将“48 ...

  10. 不吹不擂，你想要的Python面试都在这里了【315+道题】+精心整理的解答

    Part01-Py基础篇(80) Part02-网络编程和并发(34) Part03-数据库和缓存(46) Part04-前端框架和其他(155) Part01-Py基础篇(80) 1.为什么学习Py ...