參考

需求簡(jiǎn)介:

在大的div中放九個(gè)小div, 小div需要保持4:3的寬高比, 小div中會(huì)有圖片, 圖片按照4:3拉伸

下圖效果是div1:1 , 圖片寬度100%, 高度自適應(yīng)

思路

1, 使用padding-bottom / padding-top 計(jì)算值時(shí)使用父元素的寬度來生成寬高比固定的div, 但此時(shí)該div高度為0

值

描述

length

規(guī)定以具體單位計(jì)的固定的下內(nèi)邊距值，比如像素、厘米等。默認(rèn)值是 0px。

%

定義基于父元素寬度的百分比下內(nèi)邊距。此值不會(huì)如預(yù)期地那樣工作于所有的瀏覽器中。

inherit

規(guī)定應(yīng)該從父元素繼承下內(nèi)邊距。

2, 使用絕對(duì)定位拉伸子元素寬高

3, 對(duì)于圖片進(jìn)行拉伸

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;

}

總結(jié)

以上是生活随笔為你收集整理的css 大图保持宽高比压缩,css 保持宽高比缩放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。