页面内的Drupal全屏图像

【问题标题】：Drupal full screen image within page页面内的Drupal全屏图像
【发布时间】：2014-09-29 13:01:26
【问题描述】：

我正在开发一个 Drupal 网站并希望完成以下任务：我有一个内容类型，用于添加包含图像、锚链接和一些内容或表单的页面。现在图像显示在正文宽度内，但我希望此图像全屏显示。页面的其余部分，例如链接和内容/表单，必须根据正文宽度显示。

无论我尝试什么，我如何才能完成这个原因，似乎我无法让该图像以全宽显示......

【问题讨论】：

【解决方案1】：

您应该为您的内容类型创建一个自定义模板，并以不包含在任何已设置样式以在其中显示内容的 Drupal 容器中的方式打印图像字段。比如：

<div id="im">
  <?php echo $node->field_image[0]['path']; ?>
</div>
<div ..>

   <?php echo $body ?>

</div>

这不是一个有效的例子，只是为了给你一个想法。仅依赖 CSS 适用于某个主题，但可能不适用于另一个主题。

【讨论】：

【解决方案2】：

我不太确定你想做什么。您可以使用 CSS 完成全屏图像：

img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

请记住，在这些方法中，纵横比跟随浏览器窗口而不是图像纵横比。取决于z-index 图像在其他元素的前面或背景中。如果您愿意，可以使用opacity 使其透明。

【讨论】：