图片横排自适应宽度响应式CSS代码
多张图片响应式水平排列自适应效果CSS代码
全屏时的效果
宽度小于615的效果
屏幕宽度小于465的效果
样式代码:
.test {
float: left;
width: 25%;
box-sizing: border-box;
padding: 10px;
min-width: 150px;
}
.container {
width: 100%;
}
@media (max-width:615px ) {
.test {
float: left;
width: 33%;
box-sizing: border-box;
padding: 10px;
min-width: 150px;
}
}
@media (max-width:465px ) {
.test {
float: left;
width: 50%;
box-sizing: border-box;
padding: 10px;
min-width: 150px;
}
}
@media (max-width:315px ) {
.test {
float: left;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
}
html代码
<div class="container">
<div class="test" > <img src="home_1.png" alt="图片横排自适应宽度响应式CSS代码" style="max-width: 100%;"/> </div>
<div class="test" > <img src="home_2.png" alt="图片横排自适应宽度响应式CSS代码" style="max-width: 100%;"/> </div>
<div class="test" > <img src="home_3.png" alt="图片横排自适应宽度响应式CSS代码" style="max-width: 100%;"/> </div>
<div class="test" > <img src="home_4.png" alt="图片横排自适应宽度响应式CSS代码" style="max-width: 100%;"/> </div>
</div>