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

Displaying a text right of an image as if the image was bigger than it really is

本文关键字：图像 一样 显示图 文本 显示      更新时间：2023-09-26

我使用以下语句来显示图像。如果它更大，则在保持纵横比的同时将其大小调整为较小的尺寸。但如果它较小，则不得调整其大小。理论上它工作得很好，直到我放入宽度仅为 100px 的图像。然后文本显示在距左侧 100px 的距离处(即紧接在图像之后(>

<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 像素宽度的地方使用？

不确定我是否正确

<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>

使用浮点更新：

<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

更改 

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

自

<img src='mypic.jpg' align='left' style="max-width:300px; max-height:300px; width:auto"/>
相关文章：