Javascript 使图像完全填充div而不拉伸

我有不同尺寸的大图像，需要在两个尺寸中完全填充240px x 300px的容器。下面是我现在得到的，它只适用于一维：

HTML

比例应该保持不变。从本质上讲，宽的图像应该在宽度上被切掉，而高的图像需要在高度上被切掉。因此，只要放大所需的量就可以装满容器

不知道为什么我不能让它工作，我需要JavaScript吗

---

编辑：要清楚。我要把小提琴上所有的红色都弄掉。进来的图像是动态的，因此我不能使用背景图像。我对使用JavaScript持开放态度。谢谢！：）

去掉CSS文件中的line:max width:100%似乎就可以了

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
height: auto;
}

您还可以在HTML文件中的结束div中添加>，这样可以使代码更整洁

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div>

下面是一个正在工作的JSFIDLE链接：

这可以完成以下工作：

.container {
    float: left;
    height: 300px;
    width: 240px;
    background-color: red;
    margin: 20px;
}

img {
    width:240px;
    height:300px;
}

---

自动调整图像大小以适合Div-使CSS正常工作

下面是一种方法，从以下HTML开始：

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

还有演示小提琴：

当图像定向为肖像时，需要将宽度缩放到100%。相反，当图像面向横向时，需要缩放高度

不幸的是，CSS中没有针对图像纵横比的选择器组合，因此无法使用CSS选择正确的缩放比例

此外，由于图像的左上角固定到包含块的左上角，因此无法轻松地将图像居中

jQuery助手

您可以使用以下jQuery操作来确定要基于哪个类进行设置 关于图像的纵横比

$(".container").each(function(){
    // Uncomment the following if you need to make this dynamic
    //var refH = $(this).height();
    //var refW = $(this).width();
    //var refRatio = refW/refH;

    // Hard coded value...
    var refRatio = 240/300;

    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < refRatio ) { 
        $(this).addClass("portrait");
    } else {
        $(this).addClass("landscape");
    }
})

$（“.container”）。每个（函数（）{
//如果需要使其成为动态的，请取消对以下内容的注释
//var refH=$（this）.height（）；
//var refW=$（this.width（）；
//变量refRatio=refW/refH；
//硬编码值。。。
参考值=240/300；
var imgH=$（this）.children（“img”）.height（）；
var imgW=$（this）.children（“img”）.width（）；
如果（（imgW/imgH）

对于

.container

中的每个图像，获取高度和宽度，测试

宽度背景是否可以做到这一点

将图像设置为背景
二,

或

你应该试试这个：

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

我使用这个插件，占任何比例。它还需要插件才能工作。这对于需要这种处理的站点上的许多图像都很有用。启动起来也很简单

对于那些希望在没有动态图像的情况下完成此操作的人，这里有一个使用背景图像的全CSS解决方案

<div class="container" 
    style="background-image: url('http://placehold.it/300x1500'); 
    background-size: cover; background-position: center;">
</div>
<div class="container" 
    style="background-image: url('http://placehold.it/1500x300'); 
    background-size: cover; background-position: center;">
</div>



“背景大小：封面”使图像缩放以覆盖所有div，同时保持纵横比。CSS也可以移动到CSS文件中。尽管它是动态生成的，但是背景图像属性必须保留在style属性中。
我们使用了一个角度应用程序，在上面的jQuery方法上使用了一种变体。然后，我们的一位聪明的同事提出了一种纯CSS方法。请参见此处的示例：

基本上使用线高度解决了我们的问题。对于那些不想玩小提琴的人，代码片段是：

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

关键在于使用行高度并将容器设置为相同的高度。
我遇到这个主题是因为我试图解决类似的问题。然后一个灯泡在我的脑袋里熄灭了，我简直不敢相信它能起作用，因为它太简单了，太明显了

CSS

只需将最小宽度和最小高度设置为100%，它将始终自动调整大小以适应div，从而切断多余的图像。没有混乱，没有大惊小怪。
使用图像作为Div背景有很多缺点（比如SEO缺少ALT）。使用
objectfit:cover代替它在图像标记样式中
 如果您将以下内容添加到img样式的父div中，则它将起作用：；

这里是我发现的另一个解决方案，它不需要分离portraid、横向或脚本

  <div class="container">
    <img src="http://placehold.it/500x500" class="pic" />
  </div>

在这里，它工作得很好

如果您需要将img标签插入div标签，则以下解决方案非常简洁：


.container、.container img
{
最大高度：300px；
最大宽度：240px；
}
尝试将每个图像打开到另一个页面，您会注意到原始图像的大小都不一样，但都没有拉伸，只是缩放了一下：








不确定跨浏览器支持-抱歉，可能不清楚：我需要图像填充整个div，以便所有“红色”消失。有什么想法吗？：）如果不以不同的比例缩放两个轴，您将无法拍摄“不同尺寸的大型图像”，并将它们完美地安装到固定尺寸的容器中。如果按比例缩放图像，则源图像的比例将与目标图像的比例相同。如
Blaise Swanwick
所述，仅通过
css
是不可能的。您需要使用一些服务器端代码和图像处理库来调整图像大小。有什么办法吗？对涉及JS的解决方案非常开放。不，它改变了比例。是的，占位符图像有点误导。这只会使图像完全变大，而我希望它们在填充整个容器时尽可能小。嗨。谢谢，这是非常好的工作-伟大的解释，太！很乐意帮忙！如果需要，可以对jQuery进行修饰以使图像居中。但是，div的尺寸是240x300，因此如果图像是例如250x300，则简单的imgWdiv {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

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

<div class="container" 
    style="background-image: url('http://placehold.it/300x1500'); 
    background-size: cover; background-position: center;">
</div>
<div class="container" 
    style="background-image: url('http://placehold.it/1500x300'); 
    background-size: cover; background-position: center;">
</div>

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

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

.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}

  <div class="container">
    <img src="http://placehold.it/500x500" class="pic" />
  </div>

.container{
  position: relative;
  width: 500px;
  height: 300px;
  margin-top: 30px;
  background: #4477bb;
}
.pic{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}