CSS響應圖像或者最大寬度或最大高度

我目前正在對我的第一個響應的網頁設計與引導3.CSS響應圖像或者最大寬度或最大高度

工作我現在已經是用戶配置文件圖像的全寬度的網格。這些圖像具有必須完全由圖像填充的父容器。由於請求的佈局，父容器必須具有固定的高度。

問題是：使用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（最小寬度）並將寬度更改爲高度，但由於使用BootStrap並具有非常動態的佈局（摺疊邊欄等），這可能變得非常棘手。

是否有任何CSS唯一的解決方案？如果沒有，是否有一個很好的jQuery解決方案，可能也提供了一個焦點，在裁剪時將重點放在哪裏？

非常感謝您提前！

來源

2014-01-15 Benjamin Schulte

嘗試增加 '保證金：0px';在'李'css 希望它會有所幫助。 –

試試看，聽起來像你可能有同樣的問題，我只是找到了解決方案：http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/如果是，讓我知道，我可以擴展到一個完整的答案。 –

哦，這是2014年，而不是2015年:)也許評論幫助別人，至少。 –

如果你想用圖像裁剪來填充整個空間，比例將被保留，但圖像將被部分隱藏。可以使用垂直對齊和負邊距。

例如：在中心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裁剪。

來源

2014-01-15 19:26:47

我認爲，你想要的圖像，以確定<li>的寬度。我刪除了width: 25%;財產，而y我們的圖像保持他們的長寬比在你的小提琴中。因此，改變

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

來源

2014-01-15 19:30:07 halon1301

CSS響應圖像或者最大寬度或最大高度

回答

相關問題