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

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

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

和 CSS：

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

.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

和演示小提琴：http : //jsfiddle.net/audetwebdesign/QEpJH/

当您将图像定向为纵向时，您需要将宽度缩放到 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，获取高度和宽度，测试是否width<height然后设置适当的类。

另外，我添加了一个检查以考虑包含块的纵横比。之前，我隐含地假设了一个方形的视图面板。

对于没有动态图像的任何人来说，这里有一个使用 background-image 的全 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>

"background-size: cover" 使图像缩放以覆盖所有 div，同时保持纵横比。CSS 也可以移动到 CSS 文件中。尽管如果它是动态生成的，则 background-image 属性将必须保留在 style 属性中。

在 CSS 文件中取出一行：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>

这是一个有效的 JSFiddle 链接：http : //jsfiddle.net/HsE6H/19/

这是我发现的另一个解决方案，不需要单独的肖像或风景或脚本。

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

CSS

.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;
}

在这里，它运行良好......

https://jsfiddle.net/efirat/17bopn2q/2/

后台可以这样做

1. 将图像设置为背景

2.

div {
   -webkit-background-size: auto 100%;
   -moz-background-size: auto 100%;
   -o-background-size: auto 100%;
   background-size: auto 100%;
}

或者

div {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}