0

我有5635x3757 jpg 图像，我想将其放置在我的网页上所需图像。为了实现这一点，我已经加载了这样的图像

<img alt="" class="zoom-image-head__abtbg" src="asset/img/about-page-bg.jpg" /

和所需的图像我已经编写了这样的 CSS 代码

    .zoom-image-head__abtbg{
  position: absolute;
  height: 111vh;
  margin-left: 5vw;
  background-position: top;
  object-fit: cover;
  display: flex;
  left: 0;
  bottom: 0;
  width: 80vw;
  object-position: 20vw
  
}

这使得图像像这张图片显示了受我的代码影响的图像 这样 请任何人帮忙。谢谢你

4

3 回答 3

0 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
      .bg-img {
        background: url("https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg");
        background-position: top right;
        background-repeat: no-repeat;
        background-size: 80%;
        height: 100vh;
        display: flex;
      }
      
    </style>
  </head>
  <body>
    <section class="bg-img">
      
    </section>
  </body>
</html>
于 2021-11-08T13:02:25.027 回答
0

你能试试这个吗？并且图像周围的 div 不应该是position:relative;.

   .zoom-image-head__abtbg{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 5vw;      
      height: 111vh;
      width: 80vw;
      object-fit: cover;
      object-position: 20vw
    }
于 2021-10-28T14:18:18.603 回答
0

设置margin-right或padding-right到图像中vw，看看发生了什么

于 2021-10-28T12:12:50.463 回答