图片随着伸缩跟着放大缩小,使占据的一行铺满
css部分:
* {
box-shadow : inset 0 0 3px red
}
section {
display: flex;
flex-flow: wrap;
}
div {
flex-grow;
margin: 5px;
position: relative;
overflow: hidden;
}
img {
position: absolute;
left: 0;
top: 0;
display: block;
width: 101%;
}
js部分:
var imgs = [
fullUrl: 'http://'
]
var h = 250
imgs.forEach(img => {
document.write(
`
<div style="flex-grow: ${img.width * h / img.height};width: ${img.width * h / img.height}px;">
<main style="padding-bottom: calc(${img.height} / ${img.width} * 100%);"></main>
<img src="${img.fullUrl}"/>
</div>
`
)
}
最后一行如果图片少可以在后面给几个空的div