个人中心
gpt4 book ai didi

html - 为响应式网站调整图像大小；不调整大小

转载 作者：行者123 更新时间：2023-11-28 08:17:05 24 4
gpt4 key购买 nike

我的图像未缩放以适应响应式网站上的划分。我正在通过调整浏览器大小进行测试。

这是我想要完成的:

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

当我调整(然后刷新)网页大小时，公司名称部分中的图像没有按比例缩小。

HTML代码:

<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

最佳答案

我想可能是图像通过不正确的方法和 float 的组合。我是 display:inline-block 的粉丝，因为它更容易预测。棘手的部分是元素之间不允许有空格。这就是为什么我在元素之间有注释。

这 4 张图片没有绝对宽度，但听取了它们包装器 (#company_text) 的宽度(即 70%，或最大 300 像素)。 #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>

关于html - 为响应式网站调整图像大小；不调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28931976/

24 4 0
文章推荐： c++ - 关于 Xcode4 和 C++
文章推荐： c++ - 先按键再按值遍历 `hash_multimap`
文章推荐： ios - 使用 SWIFT Clean Architecture 处理无效的 Firebase 数据
文章推荐： c++ - Qt APP样式表问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com