图片不响应浏览器大小答案

【问题标题】：Image not responding to browser size图片不响应浏览器大小
【发布时间】：2013-05-20 08:57:34
【问题描述】：

我正在尝试使图像响应浏览器的大小，以便当浏览器较小时，图像会做出响应，从而不涉及滚动。我在这里How can I resize an image dynamically with CSS as the browser width/height changes? 发现了一个类似的问题，但我无法使该解决方案发挥作用。我错过了什么？

我在下面包含我的代码 - 我使用的是 Wordpress，所以它会自动在我的图像周围放置一个“p”标签，将我的图像包裹在一个段落中。另外，我不确定我是否为此目的包含了太多代码，但我想确保所有代码都在那里，以防万一出现可能导致问题的奇怪地方的错误......

这是我的html：

<body>
<div id="pop_up_page">
    <div class="content_well_pop">
        <div class="content_pop">
            <div class="portfolio_workspace_9">
                <h2>Here's the Header</h2>
            </div>
            <div class="portfolio_workspace_8">
                <p>
                    <img src="heres_the_image"/>
                </p>
            </div>
        </div>
    </div>
</div>
</body>

这是我的 CSS：

body {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
}

#pop_up_page {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;

.content_well_pop {
left: 0;
width: 100%;
}

.portfolio_workspace_9 {
width: 1000px;
margin: 15px 0 0 0px;
position: relative;
float: left;
display:block;}

.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;}

p{font-family: "Franklin Gothic Book";
font-size: 15px;
color: #757372;
display: block;
}

.portfolio_workspace_8 img {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
height: auto;
}

谢谢

【问题讨论】：

为什么图片被包裹在一个段落中？
我正在使用 Wordpress，所以它会自动在我的图像周围放置一个“p”标签，将我的图像包裹在一个段落中。我刚刚更新了我的问题来解释这一点。
Kristy Smiths anwser 应该可以工作 :-)

标签： responsive-design css

【解决方案1】：

这里的 css 规则：

.portfolio_workspace_8 {
width: 1000px; 
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;
}

您正在指定图像的父容器的宽度。将其更改为最大宽度而不是宽度。

【讨论】：

hmm 在该容器上将“宽度”更改为“最大宽度”没有做任何事情
实际上，这不适用于 Firefox - 只有 chrome 和 safari。我需要添加一些东西才能使其在 Firefox 中也能正常工作吗？我的客户主要使用firefox，所以必须兼容。
你们有演示网站吗？可能有另一个具有固定宽度的元素会抛出一些东西。
嗨@kristy 感谢您的耐心等待，我这周很忙，直到现在才能够在网站上工作。这是我拥有的一个页面，您可以查看。我暂时删除了上面建议的 css 规则，因为它在 Firefox 中搞砸了，但也许你可以得到一个想法：mauguerrero.com/chivas-regal-2
嗨@克里斯蒂-感谢您的帮助。我想出了我的Firefox问题。除了最大宽度：1000px，我还必须添加宽度：100%。不知道为什么必须定义它才能在 Firefox 中工作，但确实如此！

【解决方案2】：

这是您正在寻找的无 javascrpt、跨浏览器稳定的解决方案。我过去曾在该网站上实现过它：http://www.gardinenhaus-morgen.de/。

HTML：

<html>
    <body>
    <div id="page-wrapper">
        <div id="inner-wrapper">

        <!-- your content here -->    

        </div>
    </div>
        <div id="bg">
           <div>
               <table cellpadding="0" cellspacing="0">
                   <tr>
                       <td>
                           <img alt="background" src="<bild>" />
                       </td>
                   </tr>
               </table>
           </div>
        </div>
    </body>
</html>

CSS：

#bg div
{
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
}

#bg td
{
    vertical-align: middle;
    text-align: center;
}

#page-wrapper
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 70;
    overflow: auto;
    width: 100%;
    height: 100%;
}

#inner-wrapper
{
   margin: 30px auto;
   width: 1000px;
}

【讨论】：