时间戳

首页 > 解决方案 > 图片定位////

html - 图片定位////

问题描述

我想将图像放置为网页的背景图像，我希望始终显示图像的整个高度，并且它必须在网页中居中。图像的宽度大于其高度。在这种情况下，我希望图片在两边都被切割成相同的。

标签： htmlcss

解决方案

这就是你的要求。查看 body 元素的 CSS 代码。

* { 
  margin: 0px;
  padding: 0px;
}

body {
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  background-image: url("https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12193133/German-Shepherd-Puppy-Fetch.jpg");
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="master.min.css">
    <title></title>
  </head>
  <body>
  </body>
</html>

推荐阅读