如何更改我的 html 中的图像 src，以便我可以使用 CSS 为手持或移动设备创建其他 CSS 样式答案

【问题标题】：How to change the image src in my html so I can create other CSS styles for handheld or mobile devices using the CSS如何更改我的 html 中的图像 src，以便我可以使用 CSS 为手持或移动设备创建其他 CSS 样式
【发布时间】：2013-04-05 18:14:49
【问题描述】：

这是我的一个页面上的链接代码

    <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Savings Calculator Page</title>
<link href="master.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="spray foam insulation, foam insulation, insulation,   energy savings, energy cost reduction, savings, spray insulation" />
<script language="javascript" type="text/javascript" src="calculator.js"></script>


</head>
<body>

<div id="container">
<div id="calculator1"> </div>
<div id="calculator2"><a href="index.html"><img src="images/images/images/calculator_02.jpg" width="179" height="69" border="0" alt="Home button"/></a> </div>
<div id="calculator3"> <a href="services.html"><img src="images/images/images/calculator_03.jpg" width="125" height="69" border="0" alt="Services button"/></a></div>
<div id="calculator4"><a href="calculator.html"><img src="images/images/images/calculator_04.jpg" width="267" height="69" border="0" alt="Savings Calculator button"/></a> </div>
<div id="calculator5"><a href="aboutUs.html"><img src="images/images/images/calculator_05.jpg" width="178" height="69" border="0" alt="About Us button"/></a> </div>
<div id="calculator6"><a href="contactUs.html"><img src="images/images/images/calculator_06.jpg" width="211" height="69" border="0" alt="Contact Us button"/></a> </div>
<div id="calculator7"> </div>
<form id="calc" name="calc" method="post" action="" >  
<div id="calculator8"> </div>
<div id="calculator9"><input type="text" id="textbox1_id" class="box1" /> </div>
<div id="calculator10"> </div>
<div id="calculator11"> </div>
<div id="calculator12"> </div>
<div id="calculator13"><input type="text"  id="textbox2_id" class="box2" /> </div>
<div id="calculator14"> </div>
<div id="calculator15"> </div>
<div id="calculator16"> </div>
<div id="calculator17"><input type="button" class="button" value="" onclick="calculate()" /></div>
<div id="calculator18"> </div>
<div id="calculator19"> </div>
<div id="calculator20"> </div>
<div id="calculator21"><input type="text"    id="textbox3_id" class="box3"  readonly="readonly" value="" />   </div>
<div id="calculator22"> </div>
</form>
<div id="calculator23"> </div>
<div id="calculator24"> 
<div id="footer1"> </div>
<div id="footer2"> </div>
<div id="footer3"> <a href="http://validator.w3.org/check?uri=referer"><img
  src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" border="0" /></a> </div>
<div id="footer4"> </div>
<div id="footer5">    <a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img src="http://jigsaw.w3.org/css-validator/images/vcss"
        alt="Valid CSS!" border="0" style="border:0;width:88px;height:31px" />
</a> </div>
<div id="footer6"> </div>
<div id="footer7"> </div>  
</div>
</div>
</body>
</html>

我真正想做的就是使用 CSS 获取图像，记住！！！！他们必须保持与其他页面的链接。如果还有其他方法可以做到这一点，那么我愿意接受建议...一点 javascript，一些 PHP，我的 Dreamweaver 就是我正在使用的...如果有人可以用其中任何一种方法做到这一点，那将不胜感激.

【问题讨论】：

标签： css image src

【解决方案1】：

您可以执行以下操作。首先删除图像标签上的所有高度、宽度、边框属性。这些应该在css中完成。我建议向图像添加一个类，而不是针对样式表中的元素。

由于您现在在 css 中控制图像高度和宽度，您可以设置媒体查询以根据用户屏幕显示图像大小。

这是一个例子：

#container img{
    width: auto;
    height: 69px;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    width: auto;
    height: 30px;
}

你应该可以从那里拿走它。祝你好运！

【讨论】：