不，没有唯一的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 > <img src="http://placekitten.com/150/150" /></div><div > <img src="http://placekitten.com/150/150" /></div>
