Question

是否有一个jquery / javascript替代方法来设置驻留在表中的图像的max-width。我不能使用显示的css解决方案：table / table-layout：由于表列的数量而固定，我不希望列宽度相等。

这是一个jsfiddle示例....

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

我需要确保图像永远不会大于原始尺寸，同时在不同屏幕分辨率下桌面宽度减小时缩小图像。

jquery / javascript可以在表格中找到原生宽度和各种尺寸的图像，并确保它们永远不会更大，同时还使用最大宽度或宽度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版本。

＆＃13;

//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();

＆＃13;

/* 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%;
}

＆＃13;

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

＆＃13;

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

2 个答案: