不知道如何修改图片大小
现在项目上有段代码是如下所示
<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>
如果有两张图片代码就是这样了，我希望的是可以点击任意图片可以修改他的大小，但是不知道这样的布局如何修改。有大神有办法解决吗？
杨魅力浏览 443回答 1
1回答
-
婷婷同学_
你这个是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>
随时随地看视频慕课网APP
相关分类
JavaScript