Question

我必须在html中制作几个页面。我知道每个部分的x和Y坐标。

因此，一些图像存在5 * 4网格，其中一些存在4 * 5网格。有没有办法让这个图像充满整个浏览器并作为背景。

我以为自己在用桌子。但是这两种排序图像都不适合1种表格。

我在rails 4中制作了这个项目

我怎样才能达到我的目的？

编辑1：

我的html模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Images</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <%= stylesheet_link_tag 'application', media: 'all',
                                       'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->     
</head>
<body>
    <div class="wrap">
        <main role="main">
            <section>
                <article id="images">
              </article>
           </section>
       </main>
    </div>    
</body>
</html>

style.css：

body {

}
/* Default link styling */
a:link { color:#0271fb; }
a:visited { color:#bd02fb; }
a:hover, a:focus { color:#000; }
a:active { color:#fb0e02; }


body {
}

@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
        background:transparent !important;
    }
    html { background-color:#fff; }

    nav { display:none; }

    a[href]:after { content: " (" attr(href) ") "; }
    a[href] {
       font-weight:bold;
       text-decoration:underline;
        color:#06c;
        border:none;
    }
   a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }

   abbr[title]:after { content: " (" attr(title) ")"; }

   figure { 
       margin-bottom:1em; 
       overflow:hidden;
   }

   figure img { border:1px solid #000; }
}

我没有更多因为我仍然困惑如何解决这个问题

如何将存在多个部分的图像作为背景图像

0 个答案: