可调整大小的DIV内的流体图像 [英] Fluid image inside a resizable DIV

问题描述

我试图在可调整大小的 DIV 内放置一张流畅的图片。即使包含 DIV 大于图片，图片必须保留其比例并且不超过100％（宽度和高度）。

图片也必须以水平和垂直居中。 Chrome和Safari完美地实现了这一点 - Internet Explorer 10不会。

我设置了一个快速的

在简体演示，有一对图像和一对 span 标签。在每一对中，第一个使用 display：block ，第二个使用 display：table-cell 。 CSS的其余部分是相同的。

对于每一个，如果CSS成功，图像的宽度和高度或 span 将减少到100px。如果没有，宽度或高度将保持在200px。

图片

• 当使用 display：block 时，它可以在所有浏览器中正常工作。
  
• 当使用 display：table-cell ，Chrome和Safari（Webkit浏览器）正常工作，而IE，Firefox和Opera无法缩小图像宽度。 / ul>
  
  

  span标签 当使用 display：block ，它可以在所有浏览器中正常工作。
  

• 当使用 display：table-cell 对于图片，这种行为与测试添加到问题中的原始演示的结果是一致的。
  
  
  

  以下是原始演示的更新版本，用spa替换图像n的蓝色背景，这可能会更清楚地表明Chrome和Safari中存在的根本问题。如果演示更改为使用 display：block ，则所有浏览器的内容大小都可以正常工作（尽管对齐丢失了）。

  
  
  

  jQuery

  
  
  

  除非可以找到一种方法来正确确定表格单元格中的图像大小，在这种简化的情况下，原始演示可能需要添加一些额外的jQuery，或尝试使用更高级的CSS3功能，如 flexbox 或网格。

  
  
  

  如果需要额外的jQuery，它可以用于图像的对齐（这样可以为容器使用 display：block ），或者它可以用于调整图片的大小（去掉 max-width：100％和 max-height：100％，因此 display：table-cell 可用于对齐）。



  无论哪种情况，<一小时ef =http://api.jqueryui.com/resizable/ =nofollow> jQuery UI Resizable 有一个调整大小事件，可用于此。

  
  

  I'm trying fit a fluid image inside a resizable DIV. The image must retain its proportions and never go beyond 100% (both width and height) - even if the containing DIV is larger than the image.

  The image must also be centered, both horizontally and vertically. Chrome and Safari does this perfectly - Internet Explorer 10 doesn't.

  I've set up a quick jsfiddle to illustrate the issue.

  HTML:

  <div id="diver">
      <img src="http://ie.microsoft.com/testdrive/Performance/Minesweeper/images/ie-logo.png" style="" />
  </div>
  

  And the css:

  #diver {
      border:1px solid #000000;
      width:200px;
      height:200px;
      text-align:center;
      display: table-cell;
      vertical-align: middle;
  }
  
  img {
      max-width:100%;
      max-height:100%;
  }
  

  Try resizing the box to less than 100% width and height in Chrome and you will get something similar to these images:

  Less than 100% height:

  Less than 100% width:

  Internet Explorer 10 however, only scales the height. The width will not go below 100%, which is the main issue.

  I can get IE to scale the width, similar to Chrome/Safari, but it requires the DIV height (yes, height) to be set to something low, like 10px, which is kindda weird imo.

  I know it's possible to scale the image dynamically in javascript, but I don't see the need for extra javascript, when Internet Explorer should be able to handle the scaling correctly.

  解决方案

  Table cells and size contraints

  The problem occurs in IE, Firefox, and Opera. It's caused by using display: table-cell in combination with max-width: 100% and max-height: 100%. Table cells behave differently in this case than an element with display: block.

  It has nothing to do with the container being resizable. It also has nothing to do with aligning the content (although that's presumably the motivation for using display: table-cell). Both can be removed from the equation for the time being, in the interest of reducing the code to the simplest state in which the underlying problem can still be reproduced.

  Simplified Demo

  In the simplified demo, there's a pair of images and a pair of span tags with a blue background. In each pair, the first one uses display: block and the second one uses display: table-cell. The rest of the CSS is identical.

  For each one, if the CSS is successful, the width and height of the image or span will be reduced to 100px. If not, the width or height will remain at 200px.

  Images

  • When using display: block, it works fine in all browsers.
  • When using display: table-cell, Chrome and Safari (Webkit browsers) work fine, while IE, Firefox, and Opera fail to reduce the width of the image.

  span tags

  • When using display: block, it works fine in all browsers.
  • When using display: table-cell, Chrome and Safari fail to reduce the width and height, while IE, Firefox, and Opera fail to reduce the width.

  For images, the behavior is consistent with the results of testing the original demo added to the question.

  Here's an updated version of the original demo, replacing the image with a span with a blue background, that may demonstrate a little more clearly how the underlying problem exists in Chrome and Safari as well. If the demo is changed to use display: block, the sizing of the content works fine in all browsers (though the alignment is lost).

  jQuery

  Unless a way can be found to correctly size an image in a table cell, in a simplified case like this, solving this for the original demo will likely require adding some additional jQuery, or experimenting with a more-advanced CSS3 feature like flexbox or grids.

  If additional jQuery is needed, it could be used for the alignment of the image (so that display: block can be used for the container), or it could be used for the resizing of the image (removing the use of max-width: 100% and max-height: 100%, so that display: table-cell can be used for the alignment).

  In either case, jQuery UI Resizable has a resize event that can be used for this.

  这篇关于可调整大小的DIV内的流体图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！