Question

我正在尝试创建自适应图像映射。它在桌面模式下工作得很好但是当我改变到移动模式时，超链接不再起作用了。我检查了几个视频并从昨天开始在线阅读但仍无法找到问题所在。任何帮助都将是提前赞赏。

＆＃13;

var returns = (
    // Grab from returns table
    from r in ctx.Returns
    // Inner join with return items
    join ri in ctx.ReturnItems on r.ReturnID equals ri.ReturnID
    // Filter down by return 'closed on' date
    where (
        r.ClosedOn > startDate &&
        r.ClosedOn <= endDate
    )
    // Join with return item tests.  The 'into' clause is powerful and should be used regularly for complex queries;
    // really, the lack of an 'into' projection clause can usually be thought of as shorthand.  Here, 'into' projects
    // the 0..n join hierarchically as an IEnumerable in what is called a 'group join'.
    join rit in ctx.ReturnItemTests on ri.ReturnItemID equals rit.ReturnItemID into ritGroupJoined
    // 'Flatten out' the join result with the 'from' clause, meaning that group join results with eg. 3 matches will
    // cause 3 items in the resultant enumeration, and group join results with zero matches will cause zero items
    // in the resultant enumeration.  The .DefaultIfEmpty() method means that these results will instead cause one
    // item in the resultant enumeration, having the default value for that type (ie. null, as it's a reference type).
    // Note that without the 'into' group join above, it's not possible to access the join results with zero matches as
    // they are automatically discarded from the results during the default 'inner join'-style flattening.
    from rit in ritGroupJoined.DefaultIfEmpty()
    // Project these results into an intermediary object to allow ReturnItemTestStatus to be null (as a int? type);
    // without this, we couldn't group them because any grouped items whose ReturnItemTestStatus was null would cause
    // a type error, null being an invalid value for the ReturnItemTests.ReturnItemTestStatus property (an int type).
    select new {
        ReturnItemStatus = ri.ReturnItemStatus,
        ReturnItemTestStatus = rit == null ? null : (TestStatusEnum?)rit.ReturnItemTestStatus,
    } into retData
    // Finally, we can now group this flattened data by both item status and item test status; to group by multiple
    // fields in LINQ, use an anonymous type containing the fields to group by.
    group retData by new { retData.ReturnItemStatus, retData.ReturnItemTestStatus } into retGrouped
    // ... and project into an object to get our item status counts.
    select new
    {
        ReturnItemStatus = retGrouped.Key.ReturnItemStatus,
        ReturnItemTestStatus = retGrouped.Key.ReturnItemTestStatus,
        Count = retGrouped.Count()
    }
).ToList();

＆＃13;

Answer 1

这可以通过简单的old-school responsive image和浮动锚来完成，其大小和位置以百分比表示。尝试在几个不同的屏幕宽度下加载以下代码段。您将看到浮动锚点，其红色边框在所有屏幕宽度上悬停在木星上 - 图片随着视口的增长和收缩，并且链接会相应地调整其尺寸。

＆＃13;

#wrapper {
  width: 100%;
  max-width: 812px; /*actual width of image-- behaves strangely if exceeding this*/
  position: relative;
}

#wrapper img {
  max-width: 100%;
}

#anchor-jupiter {
  border: 1px solid red;
  height: 44%;
  width: 17%;
  position: absolute;
  left: 39.75%;
  top: 50%;
}

＆＃13;

<div id="wrapper">
  <img src="https://i.stack.imgur.com/myS74.png" />
  <a id="anchor-jupiter" href="https://en.wikipedia.org/wiki/Jupiter" target="_blank"></a>
</div>

＆＃13;

删除边框，你有一些行为与图像地图很像，但可以完全配置CSS并且能够做出响应：

＆＃13;

#wrapper {
  width: 100%;
    max-width: 812px; /*actual width of image-- behaves strangely if exceeding this*/
  position: relative;
}

#wrapper img {
  max-width: 100%;
}

#anchor-jupiter {
  height: 44%;
  width: 17%;
  position: absolute;
  left: 39.75%;
  top: 50%;
}

＆＃13;

<div id="wrapper">
  <img src="https://i.stack.imgur.com/myS74.png" />
  <a id="anchor-jupiter" href="https://en.wikipedia.org/wiki/Jupiter" target="_blank"></a>
</div>

＆＃13;

现在，您使用此方法从图像映射中丢失了一些内容 - 因为您使用的是使用CSS调整的锚点，因此您没有full SVG-like shape support that you have with image maps。但是，CSS的形状支持有限。

此外，请注意newer formats for responsive images available - 虽然您必须检查浏览器支持并提供后备。

如何使图像映射响应？

1 个答案: