是否可以使用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>

===============>>#1 票数: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> 

===============>>#2 票数:1

这是普通的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> 

  ask by MShack translate from so

未解决问题?本站智能推荐:

1回复

IE8的亚像素舍入JavaScript / jQuery解决方案,用于具有百分比宽度的表格单元

因此,显然IE8不会像IE9 +,FF和Webkit浏览器那样接受defaultView(因此不会接受getComputedStyle),这使事情变得很麻烦。 确保浏览器不接受defaultView后,我使用以下函数重新渲染表格单元的宽度: 因此,根据http://tylertate.
3回复

Java语言的setExpression对我来说是最大的问题。 解决此问题的任何解决方案

我试图冻结过去两天的gridview标头,并在Stackoverflow上以及从谷歌搜索中获得了此链接以及许多其他链接。 当我在IE 6,7上使用它并在IE8的兼容模式下使用此方法时,效果很好,但在正常模式下,此代码无法正常工作。 这行给我一个错误。 我要实现此功能。 在阅读评
3回复

寻找与下面的jQuery解决方案等效的JavaScript解决方案

我在页面上有几个按钮,并且正在动态尝试更改颜色(背景) 我已经编写了一个jQuery,它可在所有浏览器上运行,并根据传递给该函数的CSS参数更改背景色。 我正在寻找一种更改按钮颜色的javascript方法,该方法应可在所有与以下jQuery实现类似的浏览器上使用。 我已经尝
1回复

滚动宽度问题的最佳解决方案是什么?

在Chrome控制台中: 在呈现HTML的代码中: 无法读取未定义的属性“ scrollWidth”
1回复

HTML表格解决方案通过增加表格宽度来增加行或单元格的最大高度限制,Javascript

我正在研究一个非常简单的javascript解决方案,当在表中使用overflow-x:auto该脚本很有用,该脚本通过增加表的宽度来减小行的高度,直到行缩小所需的高度为止(我还发现了其他具有相同高度问题的问题)。 现在只剩下两件事来完成此脚本: 获取并检查表中每行高度的最佳方式
3回复

生成并提交表格-简单的解决方案

我试图用这个: 但是$('<form method=POST action=/logout>').submit(); 在Firefox ang IE中不起作用。 内联使用是否有同样简单的解决方案? 当前解决方案: 但是我仍然想了解为什么Firefox不想
1回复

内部内容滚动条的解决方案是什么?

我在内部内容上的滚动条有问题。 当我在内部内容上悬停一个箭头时,会出现滚动条,这正是我所需要的。 但是它只是改变了看起来很奇怪的内容。 这个属性有什么解决方案。 我想要内部内容上的滚动条,但不想更改内容? 捕捉而不悬停 当我将鼠标悬停在内部内容上时 点击此处查看实时链接
2回复

寻找一个JavaScript解决方案来重新排序股利

我在页面中有一些div,它们显示相同类型的不同内容,例如,要约,现在要约具有结束时间,并且还具有发布时间,如果用户希望通过结束时间或发布时间进行订购,则应重新订购它们。 我正在寻找可以做到这一点的javascript解决方案,Ext JS或JQuery下的任何特定库都可以工作 这些d
2回复

jQuery / Javascript会链接成为解决方案吗?

dummy.html: external.js: 将执行history.go(-1); 并结束。 在最终使用场景中,它将与包含多个选项卡的jQuery UI选项卡一起使用,通常history.go(-1)将保留在同一页面上,但通常会返回到同一页面上的另一个选项卡。
1回复

jQuery延迟或JavaScript SetTimeOut简单的解决方案

我需要通过Jquery-UI设置一个警报好的消息框,然后在完成动画的效果之后,然后导航到另一个URL 这是我正在使用的代码,不管我做了什么尝试导航发生...只有UI效果没有机会执行。 $("#dialog").dialog({ show: { effect: "p