CSS响应式图片：最大宽度或最大高度

Question

我目前正在使用Bootstrap 3开发我的第一个响应式网站设计。

现在我有一个用户个人资料图片的全宽度网格。这些图像具有必须完全填充图像的父容器。由于请求的布局，父容器必须具有固定高度。

问题是：仅使用CSS，我只知道如何适配宽度或高度，而不是取决于容器的大小。

您可以在此jsfiddle中查看问题： http://jsfiddle.net/usD2d/

li /* container */ {
    display: block;
    overflow: hidden;
    float: left;
    width: 25%;
    height: 100px; /* something fixed */
}
li img {
    width: 100%;
    min-height: 100%; /* destroys aspect ratio */
}

如果你有大屏幕，图像将完美适应。如果使用较小的设备，则图像将失去其纵横比。虽然我可以使用@media(min-width)并将img从width更改为height，但由于使用了BootStrap并具有非常动态的布局(折叠侧边栏等)，这可能变得非常棘手。是否有任何只使用CSS的解决方案？如果没有，是否有一个很棒的jQuery解决方案，还提供了剪裁时要保持焦点的重点？非常感谢您的帮助！

- Benjamin Schulte

---

尝试在li的CSS中添加margin:0px;希望能有所帮助。 - Vedant Terkar

试试这个，听起来你可能遇到了我刚找到解决方案的同样问题：http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/ 如果是的话，请告诉我，我可以将其扩展为完整的答案。 - Henrik N

哦，这是2014年，不是2015年 :) 也许这个评论至少能帮助其他人。 - Henrik N

Answer 1

如果您想用图像剪辑来填充整个空间，比例将被保留，但是图像的部分内容将被隐藏。可以使用vertical-align和负边距。

例如：在中心位置保持图像居中（就像background-position:center center一样）。

链接: http://jsfiddle.net/usD2d/2/

ul {
    width: 100%;
}
li {
    display: block;
    float: left;
    width: 24%;
    height: 150px;
    overflow: hidden;
    border: 1px solid black;
    text-align:center;/* set image in center */
    line-height:150px;/* set image or text right in middle;*/
}
img {
    min-width: 100%;
    vertical-align:middle;/* okay see it in middle , but you can tune this */
    margin:-50% -100%; /* okay, you can tune margin to crop/clip other area */
}

负边距可以减小图像的实际尺寸，从而使其居中（text-align）并坐落在由行高设置的基线上。

这是一种CSS裁剪技术。

- G-Cyrillus

Answer 2

我认为您想要图像确定 <li> 的宽度。我删除了 width: 25%; 属性，您的图像在 fiddle 中保持了其纵横比。所以请更改

li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}

到

li /* container */ {
display: block;
overflow: hidden;
float: left;
height: 100px; /* something fixed */
}

- halon1301