如何縮放圖像等元素？

當圖像縮放到百分比比例時，它會保留其縱橫比（如果正確完成）。我需要一個div來模擬這種行爲。如何縮放圖像等元素？

我的情況是我需要準確地定位一個元素與圖像的關係。圖像的大小爲瀏覽器寬度的100％，並且高度可變。我想用像素尺寸來放置一個距離圖像邊緣800像素，但使用圖像的像素作爲測量（而不是瀏覽器像素）。有沒有辦法做到這一點？

以百分比計算水平位置是可能的，但垂直百分比不適用於我的情況。

我可以使用Javascript/JQuery或SASS，這些答案是受歡迎的，但我更喜歡純粹的CSS解決方案。

如果它沒有意義，這裏的更多信息的jsfiddle：https://jsfiddle.net/ckcmrs1g/1/

來源

2016-05-12 Blue_Dragon360

像這樣的事情？ https://jsfiddle.net/ckcmrs1g/2/ –

@VincentG我不認爲那就是那麼簡單 - 如果你縮小窗口的大小，你會看到藍色框不會與紅色邊框保持齊平的形象。 – Serlite

我不太確定，但是你在尋找這種效果：https：//jsfiddle.net/ckcmrs1g/5/？ – drip

我得到這個答案的啓發：Determine original size of image cross browser?

我調整了一點，把它放在一個函數並把它稱爲加載和調整大小，所以當瀏覽器窗口被調整大小時重新計算大小。

這裏的功能代碼：

function fitIn10Pixels() { 
    var newImg = new Image(); 

    newImg.onload = function() { 
     var height = newImg.height; 
     var width = newImg.width; 
     var widthRatio = $(".redbox img").width()/width; 
     var heightRatio = $(".redbox img").height()/height; 
     var tenFromLeft = 10*widthRatio; 
     var tenFromTop = 10*heightRatio; 

     $(".bluebox img").css("left",tenFromLeft+"px"); 
     $(".bluebox img").css("top",tenFromTop+"px"); 
     $(".bluebox img").css("height",$(".redbox img").height()-2*tenFromTop+"px"); 
     $(".bluebox img").css("width",$(".redbox img").width()-2*tenFromLeft+"px"); 
    }; 

    newImg.src = $(".redbox img")[0].src; // this must be done AFTER setting onload 
}

你可以看看小提琴這裏： https://jsfiddle.net/ckcmrs1g/9/

來源

2016-05-12 19:43:05

美麗！經過一些修改，這完美運作。雖然問題很快（我對JS不太好）：這條線是什麼？ 'newImg.src = $（「。redbox img」）[0] .src;'我能想到的最接近的是它處理''的來源，但我想知道爲什麼這是必要的（什麼是與數組在最後）？ –

其實，沒關係。只是想通了（通過jquery設置源代碼到redbox）。謝謝！ –

如何縮放圖像等元素？

回答

相關問題