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从宽度更改为高度，但由于使用了BootStrap并且具有非常动态的布局（折叠侧边栏等），这可能会变得非常棘手。

是否有任何CSS解决方案？如果没有，是否有一个伟大的jQuery解决方案也可能提供一个焦点在哪里继续关注裁剪？

非常感谢你！

Answer 1

如果要使用图像剪切填充整个空间，将保留比率，但图像将被部分隐藏。可以使用垂直对齐和负边距。

示例：http://jsfiddle.net/usD2d/2/将中心图像保持在中心（就像background-position: center center ;一样。

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 */
}

负边距会减小图像的虚拟大小，该图像将居中（文本对齐）并坐在由线高设置的基线上。

这是一个CSS裁剪。

Answer 2

我认为您希望图像确定<li>的宽度。我删除了width: 25%;属性，并且您的图像保持其宽高比在您的小提琴中。所以改变

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 */
}

CSS响应图像最大宽度或最大高度

2 个答案: