在保持纵横比的同时，使溢出隐藏div内的img标签宽度和高度100％

5 回答

• 1

  我重新思考，我找到了符合条件的解决方案，我不知道是否适合其他人！

  图像将是背景大小封面，同时我将在同一个div中添加100％宽度和高度以及0不透明度的图像

  因此图像将显示为封面，任何人都可以点击相同的区域并使用正常的图像（复制链接，下载等）

  HTML

  <div style="background-image:url(http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg)">
      <img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" />
  </div>
  

  CSS

  div{
          width: 300px;
          height: 300px;
          display:inline-block;
          vertical-align: top;
          background-size:cover;
          background-position:50% 50%;
      }
  
      div img{
          width: 100%;
          height: 100%;
          opacity: 0;
          /* OLD IE */
          zoom: 1;
          filter: alpha(opacity=0);
      }
  

  代码在行动http://jsfiddle.net/Jim_Toth/mVtJc/1/

  回复于 2024-05-01T16:38:30+08:00
• 0

  我想你将不得不使用一个脚本 . （除非你想使用居中的背景图像）

  Working Fidlle [尝试使用您想要的任何图像，具有不同的宽高比]

  JQuery

  var img = $("#foo > img");
  var ratio = img.width() / img.height();
  var limit = (100*ratio)+"%";
  var margin = ((1-ratio)*50)+"%";
  
  if( ratio > 1)
  {
      img.css({"width": limit, "margin-left": margin});
  }
  else
  {
      ratio = 1 / ratio;
      img.css({"height": limit, "margin-top": margin});
  }
  

  Edit:

  这个Fiddle一次支持多个图像（使用 foo 类）

  回复于 2024-05-01T16:38:30+08:00
• 6

  试试这个：（ Note 这只适用于使用相同宽高比的图像）

  #foo img {
      width:133.33%;
      margin-left: -16.66%; /* crop img to the left: 33.33 /2 = 16.66 */
  }
  

  FIDDLE

  说明：

  您的图像是1024px宽X 768px高 . 所以宽高比= 1.333 .

  但是你的 overflow:hidden div有一个raio 1X1 - 所以图像会以100％失真 .

  因此，为了将图像显示为比例 - 您需要将宽度增加133％ .

  然后，为了使图像居中或“裁剪”以适合div - 使用边距 .

  回复于 2024-05-01T16:38:30+08:00
• 0

  另一个建议：jsFiddle

  我真的不明白为什么不应该使用background-iamge！？
  因此，只要包含div的宽度和高度保持不变，并且图像的纵横比保持在4：3，您就可以使用示例代码 .

  如果任何值发生变化，您必须至少调整 left 的值（可以使用Javascript轻松完成计算） .

  不使用背景图像使整个事物非常“脆弱”......从语义上来看，它也“不理想” .

  最好使用服务器端技术将图像裁剪为所需/所需的大小 .

  回复于 2024-05-01T16:38:30+08:00
• 0

  我认为应该是这样的：

  .image-container {
      width: 169px; // May be auto
      height: 169px;
      position: relative;
      overflow: hidden;
      .image-wrap {
          position: absolute;
          left: 50%;
          transform: translateX(-50%) translateY(0);
          transition: all .2s ease-in-out; //Run on IE
          height: 100%; // Height full frame
          img.scale {
              height: 100%;
              max-height: 100%;
              max-width: none !important; // To make sure that width of the image can be larger than its container.
          }
      }
  }
  

  HTML：

  <div class="image-container">
      <div class="image-wrap"><img class="scale" src="your image path" /></div>
  </div>
  

  回复于 2024-05-01T16:38:30+08:00