css 保持宽高比缩放

参考

需求简介:

在大的div中放九个小div, 小div需要保持4:3的宽高比, 小div中会有图片, 图片按照4:3拉伸

下图效果是div1:1 , 图片宽度100%, 高度自适应

思路

1, 使用padding-bottom / padding-top 计算值时使用父元素的宽度来生成宽高比固定的div, 但此时该div高度为0

值	描述
length	规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。
inherit	规定应该从父元素继承下内边距。

2, 使用绝对定位拉伸子元素宽高

3, 对于图片进行拉伸

<template>
  <div class="box-wrap">
    <div v-for="i in 9" class="box">
      <div class="img-wrap">
        <img src="./img.jpg" alt="" class="img">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "app"
  }
</script>

<style scoped>
  .box-wrap {
    border: 1px solid black;
    margin: auto;
    display: flex;
    height: 60vh;
    width: 40vw;
    flex-wrap: wrap;
    padding: 2px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }

  .box {
    width: 30%;
    height: 0;
    padding-bottom: 30%;
    box-sizing: border-box;
    margin: 2px;
    background: gray;
    position: relative;
  }

  .img-wrap{
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .img {
    width: 100%;
    margin: auto;
  }

</style>

来源：oschina

链接：https://my.oschina.net/ahaoboy/blog/3161289

标签

绝对定位

css