现在项目上有段代码是如下所示<div style="flex:0 1 auto"><div> <img src="eqeqeqe.jpg" style="width:140px;height:auto;"/> <h4>正面照片</h4></div></div><script></script><div style="flex:0 1 auto"><div> <img src="eqeqeqe.jpg" style="width:140px;height:auto;"/> <h4>正面照片</h4></div></div><script></script>如果有两张图片代码就是这样了，我希望的是可以点击任意图片可以修改他的大小，但是不知道这样的布局如何修改。有大神有办法解决吗？
1 回答
婷婷同学_
TA贡献1844条经验 获得超8个赞
你这个是flex布局，想改图片大小的话"flex:0 0 100px;这是图片外的div设为宽100px，就这样改，图片宽度直接设width:100%；你改div图片随之改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
display: flex;
}
.box div{
flex:0 1 auto;
transition:all 1s ease;
}
.box div.set{
flex: 0 0 1000px;
}
img{
width:100%;
}
</style>
</head>
<body>
<div class="box">
<div><img src="./2.jpg" alt=""></div>
<div><img src="./2.jpg" alt=""></div>
<div><img src="./2.jpg" alt=""></div>
</div>
<script src="./jquery-2.1.0.js"></script>
<script>
$.each($("img"),function(){
$(this).click(function(){
$(this).parent().toggleClass("set");
});
});
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消