调整响应式网站的图像大小;没有调整大小

时间：2015-03-08 21:15:06

标签： html css firefox responsive-design web

我的图片无法在响应式网站上进行扩展以适应其部门。我正在测试通过调整浏览器的大小。

这是我想要完成的事情：

+-----------------------------------------------------------------+  
|       Banner division                                           |  
| +-----------+-------------------------------------------------+ |  
| |  Logo     |        Company Info division                    | |  
| |  image    | +---------------------------------------------+ | |  
| | division  | |   Company name division, 4 images           | | |  
| |           | |                                             | | |
| |           | +---------------------------------------------+ | |  
| |           | |   Company phone division, multiple images   | | |  
| |           | +---------------------------------------------+ | |  
| |           |                                                 | |  
| +-----------+-------------------------------------------------+ |  
|                                                                 |  
+-----------------------------------------------------------------+

当我调整网页大小（然后刷新）时，公司名称部门中的图片不会缩小。

HTML code：

<BODY onLoad="">
    <!-- Banner, logo and separator bar section. -->
    <DIV id="banner">
        <!-- 
             The logo area contains the logo image.  The division makes resizable easier, as the image
             will be sized to fit the division.
        -->
        <DIV id="logo_area">
            <IMG id="logo"         src="images/header_logo.png"></IMG>
        </DIV> 

        <!--
            The company text area contains the company name and phone number.
            This division should be the same height as the logo_area division.
        -->
        <DIV id="company_text">
            <!--
                The company_name division allows for the company name to be
                treated differently than the company phone number division.
                Note:  text is not displayed since the text cannot be resized
                        proportionately as the screen size changes.
            -->
            <DIV id="company_name">
                <IMG id="word_truly"    src="images/header_truly.png"></IMG>
<!--
                <IMG id="word_tlc"      src="images/header_tlc.png"></IMG>
                <IMG id="word_pet"      src="images/header_pet_word.png"></IMG>
                <IMG id="word_sitting"  src="images/header_sitting.png"></IMG>
-->
            </DIV>

            <DIV id="call_now">
            </DIV>
        </DIV>

        <DIV id="clear_both"></DIV>
    </DIV> <!-- End of banner section. -->
</BODY>

CSS代码：

#banner
{
    position: absolute;
    background-image: url('images/paw prints.png');
    background-repeat: repeat-x;
    background-position: 0px 90%;
    background-color: #00BBFF;
    background-height: 16.666%;
    width: 100%;
    max-width: 13.25in;
    height: 15.8%;
    top: 0%;
    left: 0%;
    padding: 0% 0% 0% 0%;
    z-index: 0;
}

#banner #logo_area
{
    display: block;
    float: left;
    border: 4px solid #ffaaff; /* for debugging */
    position: relative;
    max-width: 105px;   /* This is the width of the image.  */
    max-height: 105px;  /* This is the height of the division as a percentage of the parent division.*/ 
    width: auto;        /* If this changes, the #company_text max_width must also change.*/
    height: 65%;       /* If this changes, the #company_text max_width must also change.*/
}

#banner #logo_area #logo
{
/* border: 1px solid #55aa55; /* for debugging */
    max-height: 100%;
    max-width:  100%;
    height: auto;
    width:  auto;
}
#banner #company_text
{
    border: 2px solid #888888; /* for debugging */
    float: left;
    max-width: 90%;  /* Hopefully this is the remaining width inside the banner division.*/
    width: auto;
    height: 65%;
}

#banner #clear_both
{
    clear: both;
}

#banner #company_text #company_name
{
    border: 2px solid #FFFFFF; /* for debugging */
    max-height: 66.667%;
    width: auto;
    height: auto;
}  

#banner #company_text #company_name #word_truly
{
    border: 1px solid #aa55aa; /* for debugging */
    max-height: 30%;
    height:     auto;
    width:      auto;
    margin-top: 0%;
}

#banner #company_text #call_now
{
}

屏幕快照：网站规模较小

白色寄宿生是公司名称部门。

Smaller size screen snapshot

屏幕快照：网站规模较大

白色寄宿生是公司名称部门。

enter image description here

工具：

我使用Firefox 36.0.1作为网络浏览器。

支持图片：

Logo picture - dog face
The word "Truly"
Paw prints

1 个答案:

答案 0 :(得分：0)

我认为它可能是通过不正确的方法和浮动之间的图像组合。我是display:inline-block的粉丝，因为它更具可预测性。棘手的部分是元素之间不允许有空格。这就是为什么我有元素之间的评论。

4张图片没有绝对宽度，但是听他们的包装（#company_text）宽度（70％，或最大300px）。同样适用于#logo。

注意：我在示例中留下了颜色，因此更容易看到包装器。 

#banner{
  background: pink url('http://i.stack.imgur.com/46JsI.png') repeat-x bottom;
  padding-bottom: 35px; /* Create space for the paws */
}
#logo_area{
  display: inline-block;
  vertical-align: top;
  width: 30%;
  max-width: 150px;
  background: green;
}
#logo{
    max-width: 100%;
 }
#company_text{
  display: inline-block;
  width: 70%;
  max-width: 300px;
}
#company_text img{
  width: 25%;
  display: inline-block;
  vertical-align: top;
}
<div id="banner">
        <div id="logo_area">
            <img id="logo" src="http://i.stack.imgur.com/Fu9Wa.png" />
        </div><!--
     --><div id="company_text">
            <div id="company_name">
                <img id="word_truly"    src="http://i.stack.imgur.com/1H7WS.png" /><!--
             --><img id="word_tlc"      src="http://i.stack.imgur.com/1H7WS.png" /><!--
             --><img id="word_pet"      src="http://i.stack.imgur.com/1H7WS.png" /><!--
             --><img id="word_sitting"  src="http://i.stack.imgur.com/1H7WS.png" />
            </div>

            <div id="call_now"> Call now</div>
        </div>
    </div>
</body>

相关问题
最新问题