Question

我在这里有这段代码：

<table class="media imgTable" border="1" width="auto" height="auto" style=""><tbody>
<tr><td class="xClick" width="auto" height="auto" align="left" valign="center">

<div class="xClick" style="position: relative; left: -1px; top: 3px; width: 200px; padding: 0px 1%; border: 1px solid silver; border-bottom: none; background-color: #ADD8E6;"><?php echo $label; ?></div>

</td></tr>
<tr><td class="xClick" width="auto" height="auto" align="center" valign="center" style="position: relative;">

<img id="img" src="<?php echo $src; ?>" style="width: auto; height: auto;" />

</td></tr></tbody></table>

and it looks like this

很完美。正是我想要的。但有些图像太大而且溢出屏幕（视口）

所以我尝试了这个：

<table border="1" width="auto" height="90%" style=""><tbody>
    <tr><td class="xClick" width="100%" height="" align="left" valign="center">

    <div class="xClick" style="position: relative; left: -1px; top: 3px; width: 200px; padding: 0px 1%; border: 1px solid silver; border-bottom: none; background-color: #ADD8E6;"><?php echo $label; ?></div>

    </td></tr>
    <tr><td class="xClick" width="100%" height="100%" align="center" valign="center" style="position: relative;">

    <img id="img" src="<?php echo $src; ?>" style="position: absolute; top: 0px; left: 0px; width: auto; height: auto; max-height: 100%;" />

    </td></tr></tbody></table>

looks like this

我想让img有自动宽度和高度以及最大高度。所以图像完全由td包裹，就像在第一张图片中一样。即使对于大而且溢出视口/屏幕的图像也是如此;

Answer 1

这还不够吗？

#globe1 {
   float: left;
    margin: 0px 0px 15px 20px;
    height: 100px;
    width: 100px;
}

#globe2 {
   float: right;
    margin: 0px 0px 15px 20px;
    height: 100px;
    width: 100px;
   margin: 0px 0px 15px 20px;
}


.box {

    width:  1000px;
}

img自动宽度高度和最大高度

1 个答案: