在CSS中的響應式縮放圖像

我正在用jQuery Cycle創建一個幻燈片，並且我需要能夠使用css響應式地調整幻燈片中的圖像大小。到目前爲止，循環已經如此控制圖像的寬度和高度，以至於我無法做到。在刷新頁面時，我已經能夠根據窗口寬度實現圖像大小調整，但在調整窗口大小時，圖像不會動態調整大小。我試圖找出Javascript中的解決方案，但我真的很希望能夠脫離純粹的CSS。在CSS中的響應式縮放圖像

來源

2013-06-19 Samuel Reid

你能準備[小提琴]（http://jsfiddle.net）嗎？！ – yckart

http://jsfiddle.net/rEjXX/ 有沒有嘗試在響應式調整大小的小提琴，這只是一個例子，所以你們知道我來自哪裏。 –

jQuery Cycle在<img>標記上設置內聯寬度。這是第一個問題。我會嘗試刪除它，它看起來像the options週期有此值slideResize，請嘗試將其設置爲false或0。

下一步是在容器上設置最大寬度，並在imgs上設置width: 100%。

來源

2013-06-19 20:22:54

實際上，我很確定。事情是我仍然發現，我必須手動進入Javascript並設置容器的高度像素，因爲將其設置爲高度：auto只是讓圖像從容器溢出。 –

嘗試在容器中添加「overflow：hidden;」。 –

這會導致仍然比容器大的圖像被切斷，並且會溢出的部分不會被渲染。我基本上是通過將圖像設置爲容器寬度的100％（將其設置爲其容器的100％），同時保持寬高比，從而達到魔術般的效果。圖像可以縮小到正確的寬度，但是它不會保持寬高比，或者容器縮小到比圖像小得多的尺寸，導致圖像溢出。 –

只是一個建議 - 但你可能會想使用類似的JavaScript（或AJAX服務什麼的），如果你要處理的是要把一個令人難以置信的金額在瀏覽器中調整大小的圖像，因爲處理這在瀏覽器上處理所有調整大小和縮放的壓力。

您可能希望以特定分辨率爲目標，並相應地根據「最近的」視口大小來提供圖像。

來源

2013-06-19 19:22:21

JavaScript是客戶端，所以不會對瀏覽器造成任何負擔... css比瀏覽器減少了瀏覽器的壓力，比使用ajax將請求發送到服務器的速度更快調整圖像大小。我知道可以在javascript中調整圖像大小，但我主要是看看是否可能在CSS中，或者如果有人有CSS導向的建議。 –

您可以設置相關的容器

.container{width:200px}.container img {width:100%}

希望這有助於圖像的寬度或高度！

來源

2013-06-19 19:23:24

我想我必須辭職來使用javascript。看起來，jQuery循環會對圖像和容器造成太多的CSS，所以我會處理太多的東西。我想我希望看看是否有人具體使用jQuery循環。感謝您的幫助。 –

將img元素寬度設置爲100％，並將高度設置爲自動以考慮寬高比。如果您不希望圖像成爲瀏覽器的100％，請添加容器元素。

來源

2013-06-19 19:26:25 Havsmonstret

謝謝，但它似乎好像jQuery循環做了很多東西與它分解容器和圖像的元素，我不能真正影響它我需要的方式。感謝您的幫助。 –

最好的辦法是使圖像響應，這是沒有它在一個容器btw內。現在

img { 
    width: 100%; 
    height: auto; 
}

，它會延伸到頁面的寬度，但如果它包含的是將延伸到容器的寬度，嘗試的事情是，使容器增大和縮小，以及。

來源

2013-06-19 20:13:59 Cam

在CSS中的響應式縮放圖像

回答

相關問題