Question

我正在尝试将Galleria插件用于图像。它工作正常，我可以通过参数将高度设置为0.66，高度将是宽度的66％，这是响应。

问题是，缩略图也包含在这个高度中，并且当在手机上观看时拇指不会变得更小，因此图像的高度逐渐变小而不是66＆amp;不再。

我的问题是，如何让图像保持比例（不考虑缩略图的高度）或（我想这更容易实现）：如何在平板电脑或手机上动态设置高度比例旋转（在浏览器调整大小时）。使用小屏幕尺寸我希望保持1：1的比例，因为拇指开始变得如此大于主图像），并且在480px宽度之后我希望比率为1：0.66。

有没有办法在galleria初始化后更改高度参数并刷新拱廊尺寸？我知道有一个refresh（）参数，但我不确定如何动态更改高度比参数。

Answer 1

您可以使用CSS media queries检测屏幕尺寸并更改图像的宽度和高度。

local _W = display.contentWidth
local _H = display.contentHeight

local areaPadding = 12
local topPadding = 16
local answerOffset = 30 -- you put in this space labels
local area = answer_rect.height - (areaPadding*2.5)
local howManyAnswers = #q.answers
local textX = numberX + 20
local textW = _W - textX - 24
local answerHeight = (area-topPadding-(answerOffset*#q.answers))/howManyAnswers 
local y = answer_rect.x + areaPadding + topPadding 
-- make sure answers fit screen size if neccessary decrease answerHeight
local offset = (_W - (howManyAnswers * (answerHeight+answerOffset))) * 0.5

for i=1, howManyAnswers do
  local rect = display.newRect(quizGroup, offset + answerOffset +(answerHeight+answerOffset)*(i-1), y, answerHeight, answerHeight)
  rect.anchorX, rect.anchorY = 0, 0
  rect.id = "answer"
  rect.index = i
  rect:setFillColor(0.1)
  rect:addEventListener("touch", buttonTouched)

  local label = display.newText({parent=quizGroup, text=i..".", font=native.systemFont, fontSize=20})
  label.x = rect.x - answerOffset * 0.5
  label.y = rect.y + 0.5 * rect.height 
  label:setFillColor(0.4)

  local answer = display.newText({parent=quizGroup, text=q.answers[i], width=textW, height=0, font=native.systemFont, fontSize=150})
  answer.x = rect.x + rect.width * 0.5
  answer.y = rect.y + rect.height * 0.5
  answer:setFillColor(1)
end

Galleria变高

1 个答案: