是否可以将图像放置在引导程序轮播中？

问题描述 投票：0回答：1

我目前正在自学如何编码，但遇到了一个问题。我有 3 张模特的图像，这些图像从下巴向上或鼻子向上被切断，我想知道是否有一种方法可以将图像定位在该旋转木马项目中，以便我可以看到每个模型的全脸而不是它被切断。我尝试使用外部图像调整大小来调整图像像素的大小，我尝试使用填充和顶部边距，但什么也没有。我尝试从轮播项目中定位图像，但我无法让它工作。我已经添加了模型的图像，您可以看到该图像从头部向上被截断。我正在尝试定位图像，以便我可以在轮播中看到他们所有的脸。

这是我使用的图像：Model2 Image。

这就是我执行代码时的样子：result Image

也许我还可以尝试其他方法？任何帮助将非常感激。先谢谢你了

这是 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
</head>
<body>


<!--header-->

    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
        <div class="col-md-3 mb-2 mb-md-0">
          <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
            <img src="./Images/Logo (dark).png" width="50px">          </a>
        </div>
       
        <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
        
          <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
          <li><a href="#" class="nav-link px-2">Features</a></li>
          <li><a href="#" class="nav-link px-2">Pricing</a></li>
          <li><a href="#" class="nav-link px-2">FAQs</a></li>
          <li><a href="#" class="nav-link px-2">About</a></li>
       
        </ul>
     
        <div class="col-md-3 text-end">
          <button type="button" class="btn btn-outline-primary me-2">Login</button>
          <button type="button" class="btn btn-primary">Sign-up</button>
        </div>
      
      </header>

      <!--carousel-->

  <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="" aria-label="Slide 1" ></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2" class=""></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3" class="active" aria-current="true"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item" >
        <img src="./Images/Model1.jpg" class="bd-placeholder-img" width="100%" height="500px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>>
        <div class="container">
          <div class="carousel-caption text-start" style="color:orange">
            <h1>Adeedas</h1>
            <p class="opacity-75">Adeedas Original Collection</p>
            <p><a class="btn btn-lg btn-primary" href="#" style="background-color:darkmagenta; color: black; font-weight: bold; border: solid orange 2px;">Browse Gallery</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <img src="./Images/Model2.jpg" class="bd-placeholder-img" width="100%" height="500px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>>
        <div class="container">
          <div class="carousel-caption" style="color:black">
            <h1>Adeedas Classics</h1>
            <p style="font-weight: none; color:white">View the <span style="font-weight: bold; color:purple;">designs</span> of Adeedas Classics</p>
            <p><a class="btn btn-lg btn-primary" href="#" style="background-color:orange; color: black; font-weight: bold; border: solid black 2px;">Browse Gallery</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item active">
        <img src="./Images/Model3.PNG" class="bd-placeholder-img" width="100%" height="500px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>>
        <div class="container">
          <div class="carousel-caption text-end">
            <h1> Adeedas Stripes</h1>
            <p> 3 Stripes Line</p>
            <p><a class="btn btn-lg btn-primary" href="#" style="background-color:darkmagenta; color: black; font-weight: bold; border: solid black 2px;">Browse Gallery</a></p>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
    

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>   
</body>
</html>

这是CSS：

body{
    background-color: black;
}

ul{
    gap:30px;
}
.nav-link{
    color: blueviolet;
    font-weight: 500;
}
.bd-placeholder-img{
    object-fit: cover;
   
}
html css image position carousel
1个回答
0
投票

我已经检查了你的代码，只需使用这个CSS属性

img{
  background-position:center;
}

它将解决您的问题。基本上它告诉图像它的位置应该是什么，你可以在这里阅读： https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.