图像不位置不正确？

问题描述

在这段代码中，我正在准备一个投资组合，现在当我放置一个 我的投资组合中的图像图像没有填充边框 div 和 如图IMAGE-first half>,IMAGE-second half> 所示。有人可以帮我保留四张仅对图像有边框的图像，而我需要将所有四张图像像四个盒子一样放置吗？

<section class="latestwork" id="work">
  <div class="container">
    <div class="row">
      <div class="heading">
        <h2 class="Boxx">My Latest Work</h2>
        <h6>These are my latest mobile photography captures</h6>
      </div>
    </div>
    <div class="row">
      <div class="myworkbuttons">
        <button type="button" class="myworklink" data-filter="all">All</button>
        <button type="button" class="myworklink" data-filter="creative">Creative</button>
        <button type="button" class="myworklink" data-filter="black&white">Black/white</button>
        <button type="button" class="myworklink" data-filter="portrait">Portraits</button>
      </div>
    </div>
    <div class="row">
      <div class="portfolio-items" data-category="urban-floods">
        <div class="portfolio-inner-item" style="">
          <div class="portfolio-img">
            <img src="C:\portfolio's\drive-download-20210208T164603Z-001\The disaster of 2020.jpg" alt="Image not loading">
          </div>
        </div>
        <div class="portfolio-info">
          <h4>Iso: </h4>
        </div>
      </div>

      <div class="portfolio-items" data-category="buffalo">
        <div class="portfolio-inner-item">
          <div class="portfolio-img">
            <img src="C:\portfolio's\drive-download-20210208T164603Z-001\buffalos path.jpg" style="float: left;" alt="Image not loading">
          </div>

        </div>
      </div>
    </div>

解决方法

出现这种情况是因为图片尺寸不够大。

尝试添加图像组件的 width: 100%。

,

您可以使用网格和使用 css 导入文件并尝试以下代码： .div{background-image: url("/assets/pics/picture.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; min-height:50vh; min-width:50vw }//(or what size do you need.);