Maison > Article > interface Web > 在网页html中，设置一个图片的宽高为什么其他的也一起变化？_html/css_WEB-ITnose
在网页html中，设置一个图片的宽高为什么其他的也一起变化？_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:53:051441parcourir
如下图：
带红框的图片是在同一个div中，的用鼠标调整一个图片的大小，其两个也会跟着变化，真是百思不得其解，倒底是怎么回事，请教了。
代码如下（打包成一个压缩文档了）：
http://download.csdn.net/download/pengwei0417/8174545
不爱下载的我把代码粘上来：
这个是html文档的：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>京东商城</title> <link rel="Stylesheet" href="./InitialeCode.css" /> <link rel="Stylesheet" href="./index.css" /></head><body> <!--主体，包括所有,大的结构是上中下--> <div id="content"> <!--最顶部--> <div id="head"> <!--最上面的搜索、图标等--> <div id="head1"><img src="./Image/logo.gif" alt="" width="242" style="max-width:90%" style="float: left; position: absolute; top: 28px; margin-left: 10px; left: 42px;" /><img style="max-width:90%" src="./Image/serchss.gif" alt="" /> <form style="height: 30px; width: 396px; position: absolute; top: 38px; left: 310px;" action=""> <input style="border-style: none; border-color: inherit; border-width: medium; width: 100%; height: 28px; color: #ccc; line-height: 28px; background-color: transparent; font-size: 13px;" type="text" name="searchtxt" value="请输入商品名称" /> <input style="height: 27; width: 72px; position: absolute; top: 3px; left: 320px; background-color: transparent; border-style: none;" type="submit" value="" name="btsearch" /> </form> <img src="./Image/cartinfo.gif" alt="" style="max-width:90%" style="float: right; position: relative; top: 35%;" /> <a id="bq1" href="#">物车中 0</a> </div> <!--导航栏--> <div id="head2"> <ul id="nav"> <li id="firsta" style="margin-left: 10px;"><a href="#">首页</a></li> <li><a href="#">时尚化妆品</a></li> <li><a href="#">时尚手表</a></li> <li><a href="#">精美包包</a></li> <li><a href="#">团购商品</a></li> <li><a href="#">优惠活动</a></li> <li><a href="#">EC免费模版</a></li> <li><a href="#">EC商业模版</a></li> </ul> </div> </div> <!--中间部分--> <div id="main"> <div id="leftmain"> <div id="leftmain1"> <h1> <a href="#">所有分类</a></h1> <dl style="height: auto; width: auto;"> <dt style="height: auto; width: auto;"><a href="#">精美包包</a></dt> <dd> <a href="#">双肩包</a> <a href="#">手提包</a> <a href="#">女包</a> <a href="#">男包</a></dd> <dt style="height: auto; width: auto;"><a href="#">精美包包</a></dt> <dd> <a href="#">双肩包</a> <a href="#">手提包</a> <a href="#">女包</a> <a href="#">男包</a></dd> <dt style="height: auto; width: auto;"><a href="#">精美包包</a></dt> <dd> <a href="#">双肩包</a> <a href="#">手提包</a> <a href="#">女包</a> <a href="#">男包</a></dd> <dt style="height: auto; width: auto;"><a href="#">精美包包</a></dt> <dd> <a href="#">双肩包</a> <a href="#">手提包</a> <a href="#">女包</a> <a href="#">男包</a></dd> </dl> </div> <div id="leftmain2"> <h1> <a href="#">销售排行</a></h1> <ul> <li><a href="#"><span class="leftmain2span1">1. </span>芙丽芳丝时尚沐... <span class="leftmain2span2">￥50元</span></a></li> <li><a href="#"><span class="leftmain2span1">2. </span>限量版休闲帆布... <span class="leftmain2span2">￥100元</span> </a></li> <li><a href="#"><span class="leftmain2span1">3. </span>天梭... <span class="leftmain2span2">￥600元</span> </a></li> <li><a href="#"><span class="leftmain2span1">4. </span>雅诗兰黛15色... <span class="leftmain2span2">￥20元</span> </a></li> <li><a href="#"><span class="leftmain2span1">5. </span>SUKI 蓝莓... <span class="leftmain2span2">￥40元</span> </a></li> <li><a href="#"><span class="leftmain2span1">6. </span>限量版休闲帆布... <span class="leftmain2span2">￥100元</span> </a></li> </ul> </div> <div id="leftmain3"> <h1><span style="color:White;font-weight:bold;">品牌专卖</span> <a style="font-size:12px;position:absolute;right:10px;top:0px;" href="#">全部品牌</a></h1> <a href="#"><img src= alt="" /></a> </div> <div id="leftmain4"> </div> <div id="leftmain5"> </div> <div id="leftmain6"> </div> </div> <div id="rightmain"> <div id="rightmain1"> </div> <div id="rightmain2"> </div> <div id="rightmain3"> </div> <div id="rightmain4"> </div> <div id="rightmain5"> </div> <div id="rightmain6"> </div> </div> <div class="clr"> </div> </div> <!--下部--> <div id="bottom"> <div id="bottom1"> </div> <div id="bottom2"> </div> <div id="bottom3"> </div> <div id="bottom4"> </div> </div> </div></body></html>
这个是css文档的：
body{ margin: 0; height: auto; width: auto;}#content{ background-color: Aqua; height: auto; width: 990px; margin: 0 auto; font-size: 12px;}#head{ height: auto; width: auto; background-color: white;}#head #head1{ height: 110px; width: 100%; background-color: white; position: relative; top: 0px; left: 0px;}#head1 a{ font-size: 14px; position: absolute; top: 46px; left: 900px; color: #666;}#head1 a:hover{ color: Red;}#head #head2{ height: 45px; width: auto; background-image: url(./Image/Nalist1.gif); background-repeat: no-repeat;}#head #head2 ul{ width: auto; width: auto;}#head #head2 li{ width: 120px; height: 33px; line-height: 33px; float: left;}#nav #firsta{ background-image: url(./Image/Nalist_hover.gif);}#head #head2 a{ color: White; font-size: 20px; font-family: "黑体" ,Sans-Serif; display: block; width: 120px; text-align: center;}#head #head2 a:hover{ background-image: url(./Image/Nalist_hover.gif);}#main{ height: auto; width: 990px; background-color: Red;}#main #leftmain{ height: auto; width: 200px; background-color: Teal; float: left; }#main #leftmain div{ width: 100%; border:1px solid #ECECEC; border-top-style:none;}#main #leftmain h1{ background-image: url(./Image/category_tree_bg.gif); width: 200px; font-size: 16px; height: 27px; line-height: 27px;}
回复讨论(解决方案)
你的这个InitialeCode.css文件中，有定义img的大小啊，如果你更改的话，是怎么改的？
img {display: block;height: 26px;width: 177px;} 上面的代码，是你的InitialeCode.css文件中的，你如果是更改这个，那么所有的img图片都会变化的。
LZ是不是将img这个标签 InitialeCode.css的line25这里面的属性改了?
这是会影响所有img标签的宽高. 你要在制定的标签中修改:
回楼上两位，跟初始化的CSS没关系，因为我改的方式是用鼠标拖拽一个图片的边调整大小时，另外两个图大小也跟着变化。
可以下载试一下。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：除了IE浏览器能识别之外，其他浏览器都不能识别的html写法_html/css_WEB-ITnoseArticle suivant：IE7不兼容_html/css_WEB-ITnose