不，没有唯一的CSS双向方式可以做到这一点。您可以添加
.fillwidth {
min-width: 100%;
height: auto;
}
对于一个元素，使其始终具有100％的宽度，并自动将其高度缩放为长宽比， 反之：
.fillheight {
min-height: 100%;
width: auto;
}
始终缩放到最大高度和相对宽度。为此，您需要确定纵横比是高于还是低于容器，而CSS无法做到这一点。
原因是CSS不知道页面的外观。它会预先设置规则，但只有在此之后，元素才会被渲染，并且您确切知道要处理的大小和比率。检测到该错误的唯一方法是使用JavaScript。
尽管您并不是在寻找JS解决方案，但如果有人需要，我还是会添加一个。用JavaScript处理此问题的最简单方法是根据比率差异添加一个类。如果框的宽高比大于图像的宽高比，请添加类“ fillwidth”，否则添加类“ 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>
602392714
清零编程群