调整图像大小以完全适合具有可变尺寸的div

I need to scale an image inside a div properly, so that the image keeps its proportions and so that either the width is equal to 100% or the height is equal to 100%.
So basically that the image takes up as much space as possible in the div whilst maintaining aspect ratio. And lets keep in mind that the div can change width and height.

我需要适当地缩放div内的图像,以便图像保持其比例,以便宽度等于100%或高度等于100%。所以基本上图像在div中占用尽可能多的空间,同时保持纵横比。请记住,div可以改变宽度和高度。

So I have the intuition for this, but I don't have the code ...

所以我对此有直觉,但我没有代码......

The idea would be to get the ratio (height/width) of the div with JavaScript/jQuery. => ratio A Then get ratio (height/width) of the image. => ratio B

想法是用JavaScript / jQuery获得div的比例(高度/宽度)。 =>比率A然后得到图像的比率(高度/宽度)。 =>比率B.

Note: If ratio > 1, then we have a portrait image or div.
And if ratio < 1, then we have a landscape image or div.

注意:如果比率> 1,那么我们有一个肖像图像或div。如果比率<1,那么我们有一个风景图像或div。

If ratio A < ratio B, then we want height of image to be set at 100%; If ratio A > ratio B, then we want width of image to be set at 100%;

如果比率A <比率b,则我们希望图像的高度设置为100%;如果比率a> 比率B,那么我们希望图像的宽度设置为100%;

So if we have a responsive div, width or height = 100% will change dynamically.

因此,如果我们有一个响应div,宽度或高度= 100%将动态变化。

Is this possible?

这可能吗?

3 个解决方案

#1

Here are 2(css) solutions :

这是2(css)解决方案:

http://codepen.io/cryptcslaughtr/pen/LNoMBY

.container {
  width: 100px;
  height: 200px;
  border: 1px solid #333;
  background: url("https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png") no-repeat left top / contain;
}

<div class="container"></div>

http://codepen.io/cryptcslaughtr/pen/qZGLvE

.container {
  width: 250px;
  height: 130px;
  border: 1px solid #333;
}
.container img {
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Put your image" />
</div>

#2

You can simply set parent div to position relative, and overflow hidden. And then do this:

您可以简单地将父div设置为position relative,并将overflow隐藏。然后这样做:

.bg-img {
   bottom: -1000px;
   left: -1000px;
   margin: auto;
   min-height: 100%;
   min-width: 100%;
   position: absolute;
   right: -1000px;
   top: -1000px;
}

This will insure no matter whats the size of the container it will always cover it 100%. This will also contain image proportions.

这将确保无论容器的大小如何,它将始终100%覆盖它。这也将包含图像比例。

#3

If you need img tag for SEO/alt/ARIA/whatever, here is modified Cryptc_Slaughtr's solutions combined into one:

如果你需要用于SEO / alt / ARIA / img的img标签,这里修改Cryptc_Slaughtr的解决方案合二为一:

.container {
  width: 250px;
  height: 200px;
  border: 1px solid #333;
  background: url("https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png") no-repeat left top / contain;
}
.container img {
  width:100%;
  height: 100%;
  opacity:0;
}

<div class="container"><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Put your image" title="Put your image" /></div>

#1