老师 图片大小怎么不好调节

老师 图片大小怎么不好调节

<!DOCTYPE html><html lang="en">
<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 type="text/css">        *{            margin: 0;            border: 0;        }        .top {            width: 1000px;            height: 50px;            text-align: center;            line-height: 50px;            font-size: 24px;            margin: 0 auto;
       }        .box{            width: 1000px;            height: 400px;            margin: 0 auto;            overflow: hidden;        }        .img{            width: 480px;
       }        .box1{            width: 500px;            float: left;        }        .box2{            width: 500px;            float: left;        }    </style></head>
<body>    <div class="top">        <strong>ENJOY&nbsp;THE&nbsp;LIFE</strong>    </div>    <div class="box">        <div class="box1">            <img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg" alt=""><br>            Life is a book,just read more and more refined,more <br>write morecarefully.When read,mind open,all things <br>have been indifferent to heart.Life<br> is the precipitation.        </div>        <div class="box2">            <img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg" alt=""><br>            Life is a book,just read more and more refined,more<br> write more carefully.When read,mind open,all <br>things have been indifferent to heart.<br>Life is the precipitation.        </div>    </div></body>
</html>

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好, 打开控制台, 鼠标移入对应的标签就可以看到对应的图片大小哦, 示例:

http://img1.sycdn.imooc.com//climg/5d5427320001788e13621340.jpg

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

好帮手慕慕子 2019-08-14 18:48:22

同学你好, 如下图所示,图片大小可以通过控制台查看图片自身的大小,然后在进行设置即可哦

http://img1.sycdn.imooc.com//climg/5d53e5bd00012a8d09830286.jpg

如下图所示,因为是设置大盒子整体水平居中显示, 但是左侧距离大盒子没有间距,右侧距离大盒子有一定的间距,导致整体水平居中实现的有误差哦,

http://img1.sycdn.imooc.com//climg/5d53e5f50001e87112760404.jpg

老师这里给同学提供一个参考思路

可以设置左右两侧的盒子宽度刚好等于图片的宽度, 然后左侧内容左浮动,右侧内容右浮动,这种剩余的空间就是两个盒子之间的空白间隔距离了

http://img1.sycdn.imooc.com//climg/5d53e6ca0001f1b004070466.jpg

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 提问者 anan_123 #1
    老师 怎么通过控制台看图片大小
    2019-08-14 19:46:08
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师