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

Question

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

这是一个jsfiddle示例...。

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

在Chrome浏览器中，如果您将“结果”框拉宽并缩小表格单元格内的“ Google”文本比例，但是在FF和IE中，最大宽度将无效。

我需要确保图像的大小永远不会超过其原始大小，同时还要在不同的屏幕分辨率下减小表格宽度时缩小图像。

jQuery / JavaScript可以在表格中找到本机宽度和各种尺寸的图像，并确保它们永远不会变大，同时还可以使用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> 

Answer 2

这是普通的JavaScript版本。

 //include this block after the markup, or wrap all of this block's JavaScript code in a function and use that a window.onload = yourfunction var resized = false, img_containers = null; function setImageContainerHeight() { if (!img_containers) { img_containers = document.querySelectorAll('td .img_container'); } Array.prototype.forEach.call(img_containers, function(elem) { elem.style.height = elem.querySelector(':scope > img').height + 'px'; }); } setImageContainerHeight(); window.onresize = 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(); 

 /* nothing has changed here */ /* table should have some width since it has not images 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%; } 

 <!-- nothing has changed here --> <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>