html - 无法在 div 中显示整个图像

Question

我正在将图片添加到轮播中，但页面只显示图片的上半部分。图像似乎不适合 div，而是图像呈现给页面，我只能看到它放在我放入的 div 后面的部分。

我怎样才能使整个图像适合与其所在的 div 大小相同？

我曾尝试在 CSS 中使用 object-fit，但这对我没有帮助。

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="./photos/za.jpg" alt="Los Angeles" style="width:100%;">
    </div>

    <div class="item">
      <img src="./photos/india.jpg" alt="Chicago" style="width:100%;">
      <div class="centered">Centered</div>
    </div>

    <div class="item">
      <img src="./photos/thai.jpg" alt="New york" style="width:100%;">
    </div>
  </div>

我可以使用什么 CSS 来确保整个图像显示在 div 中？

Answer 1

<div class="carousel-inner">
    <div class="item active">
        <img src="./photos/za.jpg" alt="Los Angeles"> </div>
    <div class="item"> <img src="./photos/india.jpg" alt="Chicago">
        <div class="centered">Centered</div>
    </div>
    <div class="item"> <img src="./photos/thai.jpg" alt="New york"> </div>
</div>

删除了明确提到的宽度