我有一個容器div內(nèi)的Canvas元素.當用戶從他的機器中選擇圖像時,該圖像應顯示在畫布上.我希望畫布盡可能大,但同時保持圖像的寬高比.我既不知道圖像的比例也不知道容器div的大小,因為這與用戶的屏幕/窗口大小有關.

如果我將max-width和max-height設置為例如100％,如果所選圖像小于容器,則畫布將不會填充容器.如果我設置寬度和高度而不是max-width和max-height,畫布不會保持縱橫比.

有誰知道如何解決這個問題？

最佳答案 如果您愿意使用

JQuery(或常規(guī)

JavaScript),那么這樣的解決方案可能有效：

// Note: this uses jQuery.

// It makes getting/setting the dimensions easier,

// but you can do this with normal JavaScript

var img = $("#img");

var container = $("#container");

var width = img.width();

var height = img.height();

var maxWidth = container.width();

var maxHeight = container.height();

var ratio = maxWidth / width;

if(height * ratio > maxHeight) {

ratio = maxHeight / height;

}

img.width(width * ratio);

img.height(height * ratio);

這樣做是因為它找到了寬度和高度相乘的比率,無論哪個更小(這樣它總是適合窗口).

更新：在JSFiddle.net上測試.見它here.

我希望這可以幫助你！

總結(jié)

以上是生活随笔為你收集整理的html 图片取消纵横比,html – CSS：使Canvas尽可能大,同时保持纵横比的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。