Question

我有这张图片：

http://www.problemio.com/img/phoneimage.png

但是当我放入这样的页面时：

<div style="float:left">
    <img src="http://www.problemio.com/img/phoneimage.png" style="border: none;"  />
</div>
<div style="float:left">
<p>
Some text
</p>
<p>
Some text
</p>
</div>

它显示得非常大。以下是它在测试页面上的外观： http://problemio.com/business/business_economics.php

有谁知道为什么会这样？这真是出乎意料。这是我正在使用的CSS

/* layout styles across the problemio project */ 

html 
{ 
    background-color: #ECE5B6;
    #4a4647; 
}

body, html 
{
    padding: 5px;

}

body 
{
    font-family:  "Century Gothic",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1.3em;
    #background-color: #5C5957;
    #background-color: #4a4647;



    #background:url(/img/ui/background_image.png) top left no-repeat;
    #background-size: 100%; 
}

 /* makes the background of the top bar gray */
.container 
{
    position: relative;
    background-color: white;

    overflow:hidden;
    width:1000px;
    margin: 0 auto;

    -moz-border-radius: 15px;
    border-radius: 15px;
}

.container_home 
{
    position: relative;
    background-color: white;

    overflow:hidden;
    width:1000px;
    margin: 0 auto;
}

div#bd 
{
       /* background-color: #f5f6f6; */ /* some form of gray */
        background-color: white;
        border-style:solid;
        border-width:1px;
}


/* styles for banner: */ 
.banner 
{
    position: relative;
    height: 40px;
    background-size:100%;
    #background-color: #4a4647;


}

.site_title 
{
    float:left; 
    margin-top: -3px;
    margin-left: 10px;

    font-weight: bold;
    color: #ffce2e;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    font-size:2.5em;
    text-align: left
    text-color: black;
    width: 300px;
}

.site_login 
{
    width: 700px;
    float:right; 
    position: absolute;
    right: 10px;
    bottom: 10px; 
    font-size: 90.0%;
    color: gray;

    text-align: right;
    text-align: bottom;

}
/*
.bgdiv
{
    position:absolute;
    right:0px;
    left:240px;
    top:0px;
    bottom:0px;
    background-image: url('http://www.problemio.com/img/ui/banner_background.png');
    #background-repeat: no-repeat;
}
*/



/* styles for basic template */
.content .basic
{
    background: #fff;
    padding: 15px;
    border: 1px solid #888;

    border-color: gray; 
    text-align: left;
}

.content .basic h1{
    font-size: 2em;
    font-weight:bold;
    text-align: center; 
}

.content .basic h2{
    font-size: 1.5em;
    font-weight:bold;
}

.content .basic h3{
    font-size: 1.0em;
    font-weight: bold;
}

#layout 
{ 
    /*margin:auto; */
    #margin-top: 5px;
    padding-right: 20px;
    padding-left: 20px;

    text-align:left; 

   /*     background-color: #EDEDED; */

}

label span 
{
  float: left;
  width: 15em;
}

p.half_text
{
    font-size: 80.0%;
    font-type: arial;

}

span.half_text
{
    font-size: 80.0%;
    font-type: arial;

}

p.half_height
{
    margin: 5px 0;
}

.index_problem_title:visited
{
    font-weight:bold;
    text-decoration: none;
}

.index_problem_title
{
    font-weight:bold;
    text-decoration: none;
}

.index_problem_title:hover 
{
    text-decoration:underline;
    color: gray;
}

footer a
{
    color: white;
}

div.footer 
{
text-align: right;
#color:#999999;
color: white;
background-color: black;
font-family:arial,times,serif;
font-size:18px;
#padding-top:20px;
line-height:150%;
position:relative;
float:right;
bottom:10px;
#height: 100px;
style: clear:both;
width: 1000px;
#background:url(/img/ui/footerbar.png) top left no-repeat;
}

#tabs-1
{
    padding-left: 10px; !important;
}

.ui-tabs-panel
{
   padding: 5px !important;
}

.ui-widget-header
{
    background-image: none;
    background-color: #EBEBEB;
    padding-left: 50px;
}

.ui-state-default
{
    background-image: none;
    background-color: Gray;
}

Answer 1

#layout div img
{
    max-width: 100%;
    width: 100%;
}

将此css添加到您的页面或地方。

Answer 2

我看到你正在修改它:-)我正在用萤火虫进行测试！

无论如何我在那里测试了

http://jsfiddle.net/eb56N/2/

我刚刚添加了

<img style="border: none; width: 100%;" src="http://www.problemio.com/img/phoneimage.png">

也许你已经改变了一些东西。

Answer 3

要相邻，

<div style="float: left; width: 68%; display: inline;">
    <img width="60%" height="60%" style="border: none;" src="http://www.problemio.com/img/phoneimage.png">
</div>

<div style="display: inline; float: left; width: 28%;">
<p>
Understanding and correctly forecasting the unit economics of your business is extremely important. It is a large part of a successful business plan, and the business itself.  The term might sound complicated, but it is surprisingly simple. At least we will try to make it so with an example.
</p>
<p>
In an effort to make this material easy and fun to understand, we will actually go over the unit economics of a real business. Our example business: A single-location exercise gym. We will call it Bob's Fitness.
</p>
</div>

实际上，我刚刚为你的代码添加了一些内联css，你可以在课堂上或者id中创建它们

在页面内部时，图像显示异常大

3 个答案: