图像不位置不正确？答案

【问题标题】：Image not position not correct?图像不位置不正确？
【发布时间】：2021-05-23 20:58:52
【问题描述】：

在这段代码中，我正在准备一个投资组合，现在当我放置一个我的投资组合中的图像图像未填充边框 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>

【问题讨论】：

标签： image position padding border-image

【解决方案1】：

您可以使用网格和使用 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.);

【讨论】：

你能不能用css写一个网格布局的代码来插入图像，它们之间有空格
col-md-6 是引导和使用网格系统的类。这意味着 leftside1 div 等于 rightside1 div。如果你不使用 css 中的 bootrsap，你必须 .container{ display: grid;网格模板行：1fr 1fr；网格模板列：1fr 1fr } 然后：
.leftside1{grid-row: 1/2;网格柱：1/2； url("/assets/pics/picture.jpg");背景位置：中心；背景重复：不重复；背景尺寸：封面；最小高度：50vh； min-width:50vw border: 2 px solid black} 边框你只能设置 left top ，对于 rightside1 你可以设置borderr right和top。对于其他 2 个，您可以为 leftsite 设置左下边界，为 rightside2 div 设置右上和下边界。如果您使用引导程序，则不需要放入 css display-grid。只选择网格的类。 col-md-6 你可以把 6 改成宽度的一半，用 12 改成 100%

【解决方案2】：

这是因为图片尺寸不够大。

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

【讨论】：

我已经在css中使用了宽度：100%
好的，首先删除浮动，这是一种较旧的方法，并检查检查元素那里你可以得到你做错了什么。