图片自适应
2017-10-17 本文已影响10人
卡农me
1.平均分为3份，图片宽 根据 屏幕宽 自适应，图片宽高 根据 图片宽 的大小自适应,始终不会扭曲
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.preview-img-wrapper{
display: flex;
justify-content: space-between;
width: 100%;
height: auto;
padding: 10px;
box-sizing: border-box;
}
.preview-img-parent{
flex: 1;
padding: 4px;
}
.preview-img-parent img {
width: 100%;
}
</style>
</head>
<body>
<!--平均分为3份，图片宽 根据 屏幕宽 自适应，图片宽高 根据 图片宽 的大小自适应,始终不会扭曲-->
<div class="preview-img-wrapper">
<div class="preview-img-parent"></div>
<div class="preview-img-parent"></div>
<div class="preview-img-parent"></div>
</div>
</body>
</html>
- 图片高始终为宽的1/3
利用伪元素的padding把高度撑开，padding的百分比会以父元素的宽为100%来计算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrapper {
position: relative;
width: 100%;
}
.wrapper::before {
content: '';
display:block;
padding-bottom: 33.33%;
}
.wrapper img{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="https://img.haomeiwen.com/i3770183/7e301d164fdbe786.jpg">
</div>
</body>
</html>
