表格内最大宽度的javascript解决方案

Question

是否有 jquery/javascript 替代方案来设置表格中图像的最大宽度。由于表格列的数量，我无法使用 display:table/table-layout:fixed 的 css 解决方案，并且我不希望列的宽度相等。

这是一个 jsfiddle 示例......

http://jsfiddle.net/TAE3w/52/

在 Chrome 中，如果您拉宽“结果”框并缩小表格单元格内的“Google”文本比例，但在 FF 和 IE 中，最大宽度将不起作用。

我需要确保图像永远不会大于其原始尺寸，同时当表格宽度在不同的屏幕分辨率上减小时也会缩小。

jquery/javascript 能否找到表格中的 native 宽度和各种尺寸的图像，并确保它们永远不会变大，同时还使用 max-width 或 width 100% 来缩小？

<table>
    <tr>
       <td>
        <div>    
            <img src="https://www.google.ru/images/srpr/logo4w.png"/>
            <img src="http://pictar.ru/data/media/24/nature__463_.jpg"/>
        </div>
       </td>
    </tr>
</table>

<style>
    div {
        border:2px solid red;
    }
    div img {
        max-width: 100%;
        height: auto;
    }
</style>

Answer 1

给你。代码已注释。
这个想法是使图像不影响表格的宽度。为了实现这一点，图像被设置为position:absolute。但这会产生一个问题，图像也不会影响高度。为了解决这个问题，图像已被包装到单独的容器中，并且该容器的高度已使用 JavaScript 设置。

         $(function() {

           var resized = false,
             img_containers = null;

           function setImageContainerHeight() {
             if (!img_containers) {
               img_containers = $('td .img_container');
             }
             img_containers.each(function() {
               $(this).css('height', $('> img', this).height());
             });
           }

           $(window).resize(function() {
             resized = true;
           });

           /* it is better to use window.setInterval() instead of $(window).resize(function(){...})*/
           window.setInterval(function() {
             if (!resized) {
               return;
             }

             setImageContainerHeight();

             resized = false;
           }, 250);

           setImageContainerHeight();

         });

/* table should have some width since the images are not affecting its width now */

table {
  width: 100%;
}
/* styled the div */

.img_container {
  border: 2px solid red;
  position: relative;
}
/* this way the image will not affect width of the table. instead it'll be affected by width of the parent div */

.img_container img {
  position: absolute;
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div>
        <!-- wrap each image in its container. Can be done in javascript/jquery if not feasible in html -->
        <div class="img_container">
          <img src="https://www.google.ru/images/srpr/logo4w.png" />
        </div>
        <div class="img_container">
          <img src="http://pictar.ru/data/media/24/nature__463_.jpg" />
        </div>
      </div>
    </td>
  </tr>
</table>