猿问

不知道如何修改图片大小

现在项目上有段代码是如下所示

<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>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge">&nbsp; &nbsp; <title>Document</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .box{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display: flex;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .box div{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex:0 1 auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition:all 1s ease;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .box div.set{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 0 0 1000px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; img{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:100%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div class="box">&nbsp; &nbsp; &nbsp; &nbsp; <div><img src="./2.jpg" alt=""></div>&nbsp; &nbsp; &nbsp; &nbsp; <div><img src="./2.jpg" alt=""></div>&nbsp; &nbsp; &nbsp; &nbsp; <div><img src="./2.jpg" alt=""></div>&nbsp; &nbsp; </div>&nbsp; &nbsp;<script src="./jquery-2.1.0.js"></script>&nbsp; &nbsp;<script>&nbsp; &nbsp; &nbsp; &nbsp;$.each($("img"),function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).parent().toggleClass("set");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp;</script></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答