Javascript 显示图像的文本右侧，就好像图像比实际图像大一样_Javascript_Jquery_Html_Css

Javascript 显示图像的文本右侧，就好像图像比实际图像大一样

javascript jquery html css

Javascript 显示图像的文本右侧，就好像图像比实际图像大一样,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我使用以下语句来显示图像。如果较大，则在保持纵横比的同时将其大小调整为较小的大小。但如果较小，则不应调整其大小。它在理论上运行得相当好，直到我放入一张宽度只有100px的图像。然后，文本显示在距离左侧100像素的位置，即图像后面的位置。> <body> <div style="text-align: justify"> <div width='300px'> <img src='mypic.jpg' ali

我使用以下语句来显示图像。如果较大，则在保持纵横比的同时将其大小调整为较小的大小。但如果较小，则不应调整其大小。它在理论上运行得相当好，直到我放入一张宽度只有100px的图像。然后，文本显示在距离左侧100像素的位置，即图像后面的位置。>

<body>
    <div style="text-align: justify">
        <div width='300px'>
            <img src='mypic.jpg' align='left' style="max-width:'300px'; max-height:'300px'" width='auto'/>
        </div>
        <h2>
            mytextasdfasdfasdfasdffs
        </h2>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
    </div>
</body>

现在，我的问题是：即使图像较小，我如何才能实现300像素宽度的空间使用率

  <img src='mypic.jpg' align='left' max-width='300px' max-height='300px' width='auto'/>

到

不知道我是否理解正确

<body>
    <div style="text-align: justify">
        <div style="min-width:300px; min-height: 300px;"><!-- always display 300px box -->
            <img src='mypic.jpg' align='left' style="max-width: 300px; max-height: 300px; width: auto; height: auto;" />
        </div>
        <h2>
            mytextasdfasdfasdfasdffs
        </h2>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
    </div>
</body>

使用float更新：

<body>
    <div style="text-align: justify">
        <div style="min-width:300px; min-height: 300px; float: left;"><!-- always display 300px box on the left -->
            <img src='mypic.jpg' align='left' style="max-width: 300px; max-height: 300px; width: auto; height: auto;" />
        </div>
        <h2>
            mytextasdfasdfasdfasdffs
        </h2>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
    </div>
</body>

请注意，将宽度和高度设置为“自动”不会在Internet Explorer中保持纵横比！！！不确定您必须使用JS的版本

使用attr style，style=width:300px没有max-width和max-height HTML属性。除此之外，HTML4 width属性在div元素上无效。@JamesDonnelly tnx纠正了示例复制粘贴错误，将我通过css和javascript设置的内容转换为仅限html的示例^^^@waki已尝试使用div本身，如果在图像上使用它，但再次启用了图片，这是我不想要的，但不工作，即使有变化，它仍然以同样的方式显示给我。用chrome和IE11对它进行了测试确定吗？我用IE11和width:auto和setting max width和max height进行了尝试，到目前为止，我用太大和太小的图像进行的所有测试都很好地完成了代码。如果我把你的复制到我的h2上，。。。显示在图像下方，而不是在图像周围流动。当我把最小高度去掉时，它又变成了原来的情况，即IE10及以上。IE11在内部不是MSIE 11，而是Trident 7：我添加了另一个带有float的版本来显示左边的图像：yepp看到一个很好用。你知道为什么minheight和minwidth都必须设置为有效果吗？原始图像是85 x 50，在我的本地测试中，我使用最小宽度800px

<body>
    <div style="text-align: justify">
        <div style="min-width:300px; min-height: 300px; float: left;"><!-- always display 300px box on the left -->
            <img src='mypic.jpg' align='left' style="max-width: 300px; max-height: 300px; width: auto; height: auto;" />
        </div>
        <h2>
            mytextasdfasdfasdfasdffs
        </h2>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
        asdasfsfsfdsgsfgsfgsfgsfg<br>
    </div>
</body>