0

我正在尝试创建响应式设计网页。它适用于我的表格和文本（当我调整浏览器大小时，它会自动调整大小。但这不会发生在我的图片上。

CSS 文件：

@media screen and (max-width: 999px) {
 .page {
    width: 720px;
 }
 .header {
    width:720px;
 }
 img{
    width: 720px;
 }
}

@media screen and (max-width: 719px) {
 .page {
    width: 100%;
 }
 .header {
    width:100%;
 }
 img {
    width: 100%;
 }
}

@media screen and (max-width: 479px) {
 .page {
    width: 98%;
 }
 .header{
    width: 98%;
 }
}

.page {
  width: 960px;
  background-color: #fff;
  margin: 20px auto 0 auto; 
  border: 1px solid #496077;
}

img {
  float: left;
  width: 48%;
  margin: 0 1%;
}

我的 .aspx 文件：

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
    <table border = "1">
<tr>
<td><center>'''Learning Outcome'''</center></td>
<td><center>'''Achievement Methods'''</center></td>
</tr>

<tr>
<td>Realistic problem solving and learning to learn skills</td>
<td>
my text here
</td> 
</tr>

<tr>
<td>Managing a real-time project from initiation to rollout </td>
<td>
my text here
</td>
</tr>

<tr>
<td>Understanding banking industry processes & practices</td>
<td>
my text here
</td>
</tr>

<tr>
<td>Team Cohesiveness</td>
<td>
*my text here
</td>
</tr>


</table>

<div>
    <img src="http://files.g4tv.com/images/blog/2008/06/18/633493967095957891.jpg" class="img" alt="DOMO">
    <img src="http://files.g4tv.com/images/blog/2008/06/18/633493967095957891.jpg" class="img" alt="image">
</div>

我的文字是响应式的，但我的图片不是，请参阅 jsfiddle 的示例： jsFiddle

4

2 回答 2

2

如果您已经准备好媒体查询内容（并且如果您想完全控制图像大小），我会使用您为图像提供的那些像素宽度，如果您真的做的更像是流体网格而不是基于列的，并且您想在调整大小时一直缩放你的 img，我会尝试使用：

img{
    max-width: 100%;    
    _width: 100%;
}

附带说明：当您处理响应式设计页面时，您应该考虑在从桌面移动到移动设备时将较大的图像交换为较小的（或隐藏它们） - 这是因为网络延迟，缩放大图像以适应较小的设备屏幕需要更多加载到您的页面的时间比使用替代的例如移动布局图像代替。

编辑：

您在媒体查询之外指定img 样式，因此如果它们甚至设置到位，您总是会覆盖以前的样式 - 您应该始终在 css 文件的开头指定默认样式，然后是媒体查询规则（因为它们是屏幕-width 特定），而且您的媒体查询宽度似乎非常特别，我将使用以下基础作为初学者：（移动优先方法）。

/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
/* your styles */
}

/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
/* your styles */
}

/* SMALL TABLET */
@media only screen and (min-width: 600px) {
/* your styles */
}

/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) { 
/* your styles */
}

/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) { 
/* your styles */
}

/* DESKTOP */
@media only screen and (min-width: 1280px) { 
/* your styles */
}

/* WIDESCREEN */
/* Increased body size for legibility */
@media only screen and (min-width: 1400px) { 
 /* your styles */
}

如果您当前的文件有问题，请考虑修复您的 html 标题并在下次提供更准确的信息 :)..设计响应式网格并不容易，并且在尝试这样做时网络中有多个资源可以开始。例如： http: //fluidbaselinegrid.com/和http://twitter.github.com/bootstrap/检查他们的代码并学习.. 什么来找我，我不想再发明轮子，我只是选择现成的响应式设计网格/框架作为我目前正在使用的项目的基础。祝你好运，对于过度杀伤的答案感到抱歉！

于 2012-08-18T12:40:20.367 回答
0

确保首先将固定宽度设置为图像。

<img src="image.png" width="100px"/>

并将最大宽度设置为 100%。

img {max-width: 100%;}​
于 2012-08-18T12:51:07.767 回答