我正在使用以下语句来显示图像。如果它更大，则在保持纵横比的同时将其调整为更小的尺寸。但如果它较小，则不应调整大小。理论上它工作得很好，直到我放入宽度仅为 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 像素宽度的地方使用？
最佳答案
不确定我是否理解正确
<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
关于javascript - 在图像右侧显示文本，就好像图像比实际大一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27562949/