0

我正在尝试制作位于页面中心的响应式图像（如在保留其位置的同时重新调整浏览器大小）。

我尝试了多种方法（仅限 HTML 和 CSS），包括一种流行的方法，可将以下内容添加到 CSS： 

max-width: 100%;
height: auto;
width: auto\9; /* ie8 */

但是，这在 Chrome 或 Safari 中似乎对我不起作用。

谁能指出我正确的方向？谢谢你。

我自己的代码如下：

<div id="contentbackground">
<div id="pagecontent">
<a href="about.html">
<img src="images/frontbanner.png" alt="Click to enter" title="Click to enter" >
</a>    
</div>
</div>

和我的 CSS：

#contentbackground {
    background: url("../images/frontcontent.jpg");
    width: 100%;
    min-height: 100%;
}

#pagecontent {
    margin: 0 auto;
    width: 960px;
    padding-top: 117px;
}

#pagecontent img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */

}
4

2 回答 2

1

1.）在开始时简单地定义 amax-width应该可以工作。

img {
    max-width:98%;
}

尝试清理您的代码并直接为您的图像定义一个选择器。演示。

在您的具体情况下，我将从以下清理开始：

  <img src="images/frontbanner.png" class="respondme" alt="Click to enter" title="Click to enter" >

.respondme { 
  max-width: 98%;
}

#pagecontent {
    margin: 0 auto;
    width: 960px;
    padding-top: 117px;
    background: url('..coolimage.jpg'); // why do you have two wrappers, delete contentbackground entirely and merge here?
    position:relative; // adding this actually makes it a wrapper
}

2.)仅用于前景图像；我更喜欢使用bootstrap。

例子：

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">

只需添加课程.img-responsive，您就完成了！演示。

3.)对于背景图片：

background-size: 100%;
于 2015-07-20T18:56:26.023 回答
1

我认为你的#pagecontent宽度不应该是固定的。试着让它width: 100%; 看看这里：http: //jsfiddle.net/dspy5xte/1/

此外，您的图像似乎没有居中。

于 2015-07-20T18:58:09.877 回答