3

这里是新手。

我正在尝试学习响应式设计，并且这样做刚刚遇到了 ie9 的 max-width prob，而它在 Chrome 中按预期工作。当我调整浏览器窗口时，它只是不会调整我试图缩放的图像的最大宽度。让我向您展示 html 代码和 css。

HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is a test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/resetmin.css" />
<link rel="stylesheet" type="text/css" href="css/test3.css" />  
</head>
<body>
<div style="background-color:black; height:35px;"></div>
<div id="container">
    <div class="content">
        <div class="header">
        <h1>This is my header</h1>
        </div>
        <div class="pic">
            <img src="image001.jpg" alt="Just a picture 815px width and 500px height"></img> 
        </div>
        <div class="imageControl">
        </div>
        <div class="clear"></div>
    </div>
<div class="content">
        <div class="header">
        <h1>This is my header</h1>
        </div>
        <div class="pic">
            <img src="image002.jpg" alt="Just a picture 500px width and 815px height"></img> 
        </div>
        <div class="imageControl">
        </div>
        <div class="clear"></div>
    </div>
    <div class="sideBar"></div>
    <div class="padding"></div>
</div>

<div style="background-color: #555; width: 960px; height: 485px; margin: 0 auto; clear: both;"></div>
</body>
</html>

CSS 代码：test3.css

body {
color: #333;
font: 100%/1.5 Cambria, Georgia, serif;
background: #ece6d6 url(_assets/bg-light.png) repeat;
/* margin: 0 auto; */
}

img {
display: block;
max-width: 100%;
}

#container {
width: 960px;
margin: 0 auto;
background-color: #aaa;
}

.header {
height: 40px;
border-top: 1px solid #000;
}

.content {
background-color: grey;
float: left;
margin: 15px 15px 0px 15px;
}

.pic {
width: auto;
padding: 15px;
background-color: #777;
float: left;
/* position: relative;
top: 15px;
left: 15px; */
}   

.imageControl {
width: 85px;
height: 350px;
background-color: #ccc;
float: right;
/* position: relative;
top: 15px;
left: 15px; */
}

.clear {
clear: both;
}

.padding {
padding-bottom: 15px;
clear: both;
}

.sideBar {
width: 300px;
height: 250px;
margin: 15px 15px 0px 0px;
float: right;
background-color: #333;
}

h1 {
font: bold 1.6em Cambria, Georgia, serif;
}

@media screen and (max-width: 980px) {

#container {
    width: 95%;
}

.sidebar {
    width: 30%;
}
.sidebar .widget {
    padding: 8% 7%;
    margin-bottom: 10px;
}

}

请查看并审查它。它仍在进行中，所以当你调整浏览器时请不要介意凌乱的响应式设计（我现在的问题是图像，因为它不会在 ie9 中缩小）。

谢谢。如果仍有不清楚的地方，请询问，我会尽力回复。

4

2 回答 2

3

找到了。经过大量的修补，这是我现在的解决方案。这就是我在我的 html 和 css 代码中添加/编辑的内容。

编辑的 HTML 代码：

<div class="pic">
   <img class="imageObject" src="image001.jpg" alt="Just a picture 815px width and 500px height"></img> 
</div>

添加CSS代码：

img.imageObject {
margin:0 auto;
width:100%;
max-width:50.3975em;
}

至于为什么，我还在寻找原因的解释。但是现在仪式这对我有用。

于 2012-07-15T08:39:35.407 回答
0

这是一个可能的修复：

CSS：

.scale
{
    max-width:980px;
}
.scale img
{
    display:block;
    max-width:80% //your value
}

HTML：

<div class="scale">
    <img src="...."/>
</div>
于 2014-09-04T17:58:30.790 回答