0
所以我有一套使用erb生成的分步說明，每一步中至少有一個圖像標記（.tagged）疊加在頂部，突出了步驟說明文本所指的內容。現在的問題是圖像尺寸不利於在移動設備上顯示（它們的最大寬度爲640px）。我現在減少了圖像的最大寬度爲300px，但是現在所有的標籤位置都不正確。我已經將它們的x-y位置除以2.13（640/300），但標籤仍然不在正確的位置。有些非常接近，但另一些則不是。我想這是因爲所有的照片都不是一樣的寬度，但我不確定。任何想法爲什麼？提前致謝。這些座標爲什麼不正確？
的jQuery（標籤是如何加的）
$('span.i_contact').each(function() {
var pos_width = ($(this).data('pos-width'))/2.1;
var pos_height = ($(this).data('pos-height'))/2.1;
var xpos = ($(this).data('pos-x'))/2.1;
var ypos = ($(this).data('pos-y'))/2.1;
var taggedNode = $('<div class="tagged" />')
taggedNode.css({
"border":"5px solid orange",
"width":pos_width,
"height":pos_height,
"left":xpos,
"top":ypos
});
var n = $(this).data('index')
$('.i_tagmap' + n).append(taggedNode)
console.log(taggedNode.position())
});
$("span.o_contact").each(function() {
var pos_width = ($(this).data('pos-width'))/2.1;
var pos_height = ($(this).data('pos-height'))/2.1;
var xpos = ($(this).data('pos-x'))/2.1;
var ypos = ($(this).data('pos-y'))/2.1;
var taggedNode = $('<div class="tagged" />')
taggedNode.css({
"border":"5px solid green",
"width":pos_width,
"height":pos_height,
"left":xpos,
"top":ypos
});
var n = $(this).data('index')
$('.o_tagmap' + n).append(taggedNode)
});
ERB（如何生成步驟）
<% n = steps.index(step) %>
<section id="step<%= n+1 %>" style="padding-top: 60px;">
<h2 style="margin-left:20px;"> Step <%= n+1 %></h2>
<div class="stepcontainer">
<div class="steptext">
<% if step.priority == 1 %>
<%= "Plug the #{step.i_connection.cord_type.name} end of the cable into the #{step.i_product.full_name}. Then plug the #{step.o_connection.cord_type.name} end into the #{step.o_product.full_name}." %>
<% elsif step.priority == 2 %>
<%= "Plug the #{step.i_connection.cord_type.name} end of the cable into the #{step.i_product.full_name}. Then plug the #{step.o_connection.cord_type.name} end into the #{step.o_product.full_name}." %>
<% elsif step.priority == 3 %>
<%= "Plug the #{step.o_connection.product.full_name } #{step.o_connection.cord_type.name} Cable into the wall." %>
<% elsif step.priority == 4 %>
<%= "Plug the #{step.i_connection.cord_type.name} end of the cable into the #{step.i_connection.product.full_name}. Then plug the #{step.o_connection.cord_type.name} end into the #{step.o_connection.product.full_name}." %>
<% elsif step.priority == 5 %>
<%= "Plug #{step.o_connection.product.full_name}" %>
<% elsif step.priority == 6 %>
<%= "Touch the #{step.o_connection.button.name} Button on the #{step.o_connection.product.full_name}" %>
<% end %>
</div>
<div class="modalbutton">
<%= render(step.flags.new) %>
</div>
<div class="productimg">
<span class="o_contact o_contact<%= n %>" data-pos-x="<%= step.o_connection.pos_x %>" data-pos-y="<%= step.o_connection.pos_y %>" data-pos-width="<%= step.o_connection.pos_width %>" data-pos-height="<%= step.o_connection.pos_height %>" id="spanid<%= n %>" data-index="<%= n %>"> </span>
<% if step.input_contact.present? %>
<span class="i_contact i_contact<%= n %>" data-pos-x="<%= step.i_connection.pos_x %>" data-pos-y="<%= step.i_connection.pos_y %>" data-pos-width="<%= step.i_connection.pos_width %>" data-pos-height="<%= step.i_connection.pos_height %>" ="spanid<%= n %>" data-index="<%= n %>"></span>
<div id="image_panel<%= n %>" style="float:left; width:300px; position:relative;">
<%= link_to image_tag(step.i_connection.image.image.url(:medium)), "#{step.i_connection.image.image.url(:large)}", class: "fancybox" %>
<div class="i_tagmap<%= n %>"></div>
</div>
</div>
<div class="cableimg">
<% if step.i_connection.cord_type.present? %>
<%= image_tag(step.i_connection.cord_type.image.url(:thumb), :class => "orange") %>
<% end %>
<% end %>
<% if step.o_connection.cord_type.present? %>
<%= image_tag(step.o_connection.cord_type.image.url(:thumb), :class => "green") %>
<% end %>
</div>
<% if step.o_connection.button.present? %>
<div class="productimg">
<div id="image_panel<%= n %>" style="float:left; width:300px; position:relative;">
<%= link_to image_tag(step.o_connection.image.image.url(:medium)), "#{step.o_connection.image.image.url(:large)}", class: "fancybox" %>
<div class="o_tagmap<%= n %>"></div>
</div>
</div>
<% else %>
<div class="productimg">
<div id="image_panel<%= n %>" style="float:left; width:300px; position:relative;">
<%= link_to image_tag(step.o_connection.image.image.url(:medium)), "#{step.o_connection.image.image.url(:large)}", class: "fancybox" %>
<div class="o_tagmap<%= n %>"></div>
</div>
</div>
<% end %>
</div>
</section>