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

Question

我正在尝试制作我放置在页面中央的图像，响应（如在保持其位置的同时根据浏览器大小重新缩放）。

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

max-width: 100%;
height: auto;
width: auto; /* 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; /* 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">

只需添加 class .img-responsive 即可！ Demo.

3.)对于背景图片:

background-size: 100%;

Answer 2

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

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

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

Making an image responsive (re-size with browser)

html

css

browser

image

rescale