css 大图保持宽高比压缩,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, 对于图片进行拉伸

export default {

name: "app"

}

.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;

}