Question

我试图制作一张我位于页面中央的图片，反应灵敏（如在保留浏览器大小的同时重新调整大小的位置）。

我尝试过多种方法（仅限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 */

}

Answer 1

1。）只需在开始时定义max-width即可。

img {
    max-width:98%;
}

尝试清理代码并直接为图像定义选择器。 Demo

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

  <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即可！ Demo

3。）对于背景图片：

background-size: 100%;

Answer 2

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

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

使图像响应（使用浏览器重新调整大小）

2 个答案: