Question

我正在使用以下语句来显示图像。如果它更大，则在保持纵横比的同时将其调整为更小的尺寸。但如果它更小，则不应调整大小。它在理论上非常有效，直到我放入宽度仅为100px的图像。然后文本显示距离左侧100px（也就是图像后面）。＆gt;

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

Answer 1

更改

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

Answer 2

不确定我是否正确找不到它

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

请注意，将宽度和高度设置为auto不会在Internet Explorer中保持宽高比！（不确定是什么版本）你必须使用JS

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

2 个答案: