缩放图像以适合边界框 [英] Scale image to fit a bounding box

问题描述

是否有一个仅限CSS解决方案将图像缩放到边框（保持高宽比）？如果图片大于容器，则适用此方法：

  img {
 max-width：100％; 
 max-height：100％; 
} 
  

示例：

• 使用案例1（作品）： http://jsfiddle.net/Jp5AQ/2/


• 使用案例2（作品）： http://jsfiddle.net/Jp5AQ/3/

但我想放大图片，直到尺寸为容器的100％。

• 使用案例3（不起作用）： http：// jsfiddle .net / Jp5AQ / 4 /

解决方案

虽然这是被接受的答案，以下的Wizcover的回答是更准确的，目前支持所有浏览器，如果你有选项

否，没有CSS只能在两个方向执行此操作。您可以添加

  .fillwidth {
 min-width：100％; 
 height：auto; 
} 
  

向aa元素始终使其宽度为100％到纵横比或的反比：

  .fillheight {
 min-height ：100％; 
 width：auto; 
} 
  

始终缩放到最大高度和相对宽度。要做到这两点，你需要确定长宽比是高于还是低于它的容器，CSS不能这样做。

原因是CSS不知道页面看起来像什么。它预先设置规则，但之后才是元素被渲染，你知道你正在处理什么尺寸和比率。使用JavaScript的唯一方法是检测它。

---

虽然你不是在寻找一个JS解决方案，一个反正如果有人可能需要它。使用JavaScript处理这个问题的最简单的方法是根据比率差来添加一个类。如果框的宽高比大于图像的宽高比，添加类fillwidth，否则添加类fillheight。

每个函数（function（）{var fillClass =（$（this）.height ）> $（this）.width（））？'fillheight'：'fillwidth'; $（this）.find（'img'）。addClass（fillClass）;}）; pre>

  .fillwidth {width：100％; height：auto; } .fillheight {height：100％; width：auto; } div {border：1px solid black; overflow：hidden;}。tower {width：100px; height：200px;}。trailer {width：200px; height：100px;}  

 < script src = ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =tower> < img src =http://placekitten.com/150/150/>< / div>< div class =trailer> < img src =http://placekitten.com/150/150/>< / div>  

p>

Is there a css-only solution to scale an image into a bounding box (keeping aspect-ratio)? This works if the image is bigger than the container:

img {
  max-width: 100%;
  max-height: 100%;
}

Example:

• Use case 1 (works): http://jsfiddle.net/Jp5AQ/2/
• Use case 2 (works): http://jsfiddle.net/Jp5AQ/3/

But I want to scale up the image until a dimension is 100% of the container.

• Use case 3 (doesn't work): http://jsfiddle.net/Jp5AQ/4/

解决方案

Note: Even though this is the accepted answer, Wizcover's answer below is more accurate and is currently supported in all browsers if you have the option of using a background image.

No, there is no CSS only way to do this in both directions. You could add

.fillwidth {
    min-width: 100%;
    height: auto;
}

To the an element to always have it 100% width and automatically scale the height to the aspect ratio, or the inverse:

.fillheight {
    min-height: 100%; 
    width: auto;
}

to always scale to max height and relative width. To do both, you will need to determine if the aspect ratio is higher or lower than it's container, and CSS can't do this.

The reason is that CSS does not know what the page looks like. It sets rules beforehand, but only after that it is that the elements get rendered and you know exactly what sizes and ratios you're dealing with. The only way to detect that is with JavaScript.

---

Although you're not looking for a JS solution I'll add one anyway if someone might need it. The easiest way to handle this with JavaScript is to add a class based on the difference in ratio. If the width-to-height ratio of the box is greater than that of the image, add the class "fillwidth", else add the class "fillheight".

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});

.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>

这篇关于缩放图像以适合边界框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！